javascript - 显示特定类 Javascript(Jquery) 的元素

Question

<div id=klik>KLIK   </div>
<div class="list">
    <div class="list-wrapper">
        <div class="line">1</div>
        <div class="line">2</div>
    </div>
    <div class="line">3</div>
    <div class="line">4</div>
</div>      

这是 Html。我首先使用 Javscript 隐藏整个列表。然后我想创建一个 onclick 函数来仅显示前两个元素，即 div 列表包装器中的两个元素。这是我写的代码。

$(document).ready(function(){
$(".list").hide();

$("#klik").click(function(){
$(".list-wrapper").show();

});
});

问题是它从不显示元素。

Answer 1

您正试图显示一个仍然包裹在隐藏父元素中的元素。如果您隐藏和显示相同的选择，它就可以正常工作。你可以这样做:

$(document).ready(function(){
   $(".list").hide();

   $("#klik").click(function(){
      $(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
   });

});​

Working demo

编辑:
并修复您的 HTML 标记(缺少引号 "" )<div id=klik>KLIK</div>