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

很少有注意事项

  任何元素的

id不会也不应以数字开头。


对于HTML4 ID和NAME令牌，必须以字母([A-Za-z])开头，后面可以跟任意数量的字母，数字   ([0-9])，连字符("-")，下划线("_")，冒号(":")和   期间(".")。

HTML5更宽容，只说id必须包含至少一个字符，并且可能不包含任何空格   字符即可。




element attribute value应附在" "后面，此处id值应附在" "旁边，如果你这样做也会很好   将attribute values包裹在" "而不是' '。



您无需在单display:block;display:none内同时指定style，因为后者可以更快地使用id   将毫无用处。

刚刚更改了element的每个show和element 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>

@array: blue, red, green, yellow;

.color-mix(@i) when (@i > 0) {
  ul {
    li:nth-child(@{i}) {
      .background-color(extract(@array, @i);
    }
  }
.color-mix(@i - 1);
}

.color-mix(4);

list - show default在加载时输入

2 个答案: