点击（）无效

Question

我的页面上有两种类型的div。第一种是“主要项目”，第二种是“子项目”。我用css隐藏了子项目，当我们点击主项目时我想要显示它们。我试过了，但它不起作用。

HTML

<div class="item">
    Item 1
    <div class="sub-item">  
        Sub Item 1
    </div>
</div>
<div class="item">
    Item 2
    <div class="sub-item">  
        Sub Item 2
    </div>
</div>
<div class="item">
    Item 3
    <div class="sub-item">  
        Sub Item 3
    </div>
</div>
<div class="item">
    Item 4
    <div class="sub-item">  
        Sub Item 4
    </div>
</div>
<div class="item">
    Item 5
    <div class="sub-item">  
         Sub Item 5
    </div>
</div>

CSS

.menu .item {
    color: White;
    width: 250px;
    vertical-align: middle;
    line-height: 35px;
    color:black;
}

.menu .sub-item {
    margin-left: 15px;
    display:none;
}

JS / jQuery的

$(".item").click(function() {
    $(this).child().show();
});

此外，这是小提琴：jsFiddle

Answer 1

没有child功能。您可能想要使用children，但更具选择性更清晰。使用此：

$(".item").click(function() {
    $('.sub-item', this).show();
});

<强> Demonstration

Answer 2

你的jsfiddle缺少一些东西。首先，您没有选择jQuery库。其次，您需要在document.Ready事件中运行jQuery，否则jQuery尚未定义。

以下是更新的fiddle。

    $(document).ready(function() {
        $(".item").click(function () {
            $(this).children('.sub-item').show();
        });
    });

您可以使用jQuery中的.children()方法选择子元素，但正如其他提到的.child()不是方法。

Answer 3

你可以试试这个

jQuery(document).delegate('.item', 'click', function(e) {
   $('.sub-item', this).show();
});