列表 - 加载时显示默认输入

Question

我正在尝试显示下拉列表中的默认条目。目前，当我点击 link 时，结果会在下方展开。这很好用。

但在加载时我想显示一个默认条目。

我试过用这个来做，但没什么区别。

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

我创建了一个 fiddle 来展示我所拥有的：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 for any element doesn't and shouldn't begin with numbers.

For HTML4 ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.

element attribute value should be enclosed with " ", here id value should be enclosed with " ", Also it will be good if you have attribute values wrapped within " " instead of ' '.

You don't need to specify both display:block;display:none inside single style because, the later one will work and sooner one will be of no use.

刚刚为每个 element 和 show 更改了 DOM ready 上的 element 的 id，如下所示。

$(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>

列表 - 加载时显示默认输入

list - show default enter on load

jquery

list

show-hide