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
   });

});​

工作演示

编辑：
并修复您的 HTML 标记（缺少引号""）<div id=klik>KLIK</div>

Answer 2

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

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

    });
});