javascript - 点击()不工作

Question

我的页面上有 2 种类型的 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();
});

此外，这是 fiddle :jsFiddle

Answer 1

没有child 函数。您可能想使用 children但更有选择性更清洁。使用这个:

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

Demonstration