list - show default enter при загрузке

Question

Я пытаюсь показать запись по умолчанию из выпадающего списка. В настоящее время, когда я нажимаю на ссылку, результат расширяется ниже .. это хорошо работает.

Но при загрузке я хотел бы показать запись по умолчанию.

Я пробовал это делать, но это не имело никакого значения.

var elem = $('#3').next('.qst') 
$('.qst').not(elem).hide(800); 
elem.toggle(850); 

Я создал скрипку, показывая, что у меня есть: https://jsfiddle.net/84sk48mf/

Любые идеи, как я делаю это?

Answer 1

попробовать этот простой способ ..

Js Fiddle

 var elem = $('#3'); //based on the id, it will expand 
    $('.qst').hide(800); //by default it will hide all the elements 
     elem.toggle(850); 

Или Вы хотите, чтобы скрыть первый элемент? Попробуйте этот способ

var elem = $('#list li:first-child').find(".qst"); 
     $('.qst').hide(800); 
     elem.toggle(850); 

Answer 2

Вот простой способ сделать это:

Fiddle: https://jsfiddle.net/84sk48mf/3/

var elem = $('.qst:eq(2)'); 
$('.qst').not(elem).hide(800); 
elem.toggle(850); 

eq, Jquery

Answer 3

Несколько вещей отметить

---

• id для любого элемента нет и не должно начинаться с цифры.

  • Для HTML4ID и NAME лексем должны начинаться с буквы ([A-Za-z]) и может следовать любое количество букв, цифр ([0-9]), дефисы ("-"), подчеркивает ("_"), колонов (":") и периоды (".").
  • HTML5 еще более снисходительными, говоря лишь о том, что id должен содержать по крайней мере один символ и не может содержать любое пространство символов.

• element attribute value должен быть заключен с " ", здесь id значение должно быть заключено с " ", И будет хорошо, если вы иметь attribute values завернутые в " " вместо ' '.

• Вам не нужно указывать как display:block;display:none внутри одной style потому, что позже один будет работать и рано один будет никакой пользы.

Просто изменили id для каждого element и showelement на DOM ready, как показано ниже.

$(document).ready(function() { 
 
    $('a.linky').on('click', function(e) { 
 
     e.preventDefault(); 
 
     var elem = $(this).next('.qst') 
 
     $('.qst').not(elem).hide(800); 
 
     elem.toggle(850); 
 
    }); 
 
    var elem = $('#m3') 
 
    elem.show(850); 
 
});

.qst { 
 
    color: black; 
 
    width: 750px; 
 
    border: 1px solid #000; 
 
    line-height: 150%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="list"> 
 
    <li><a href="#" class="linky"> Q1 ?</a> 
 
     <div class="qst" style="display:none;" id="m0"><strong>Q. 1 ?</strong> 
 
      <br/> ANSWER 1 
 
     </div> 
 
    </li> 
 

 
    <li><a href="#" class="linky"> Q2 ?</a> 
 
     <div class="qst" style="display:none;" id="m1"><strong>Q. 2 ?</strong> 
 
      <br/> ANSWER 2 
 
     </div> 
 
    </li> 
 

 
    <li><a href="#" class="linky"> Q3 ?</a> 
 
     <div class="qst" style="display:none;" id="m2"><strong>Q. 3 ?</strong> 
 
      <br/> 
 
      <br/> ANSWER 3 
 
     </div> 
 
    </li> 
 

 
    <li><a href="#" class="linky"> Q4 ?</a> 
 
     <div class="qst" style="display:none;" id="m3"><strong>Q. 4 ?</strong> 
 
      <br/> ANSWER 4 
 
     </div> 
 
    </li> 
 

 
    <li><a href="#" class="linky"> Q5 ?</a> 
 
     <div class="qst" style="display:none;" id="m4"><strong>Q. 5 ?</strong> 
 
      <br/> ANSWER 5 
 
     </div> 
 
    </li> 
 
</ul>