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>

Answer 2

您正在隐藏您要显示的内容的父元素。 show只显示你调用它的元素，它不会级联DOM树。

$(document).ready(function(){
    $(".list").hide();
    $("#klik").click(function(){
         $(".list").show(); //Show .list elements instead

    });
});

显示特定类的元素Javascript（Jquery）

2 个答案: