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

另外，这里是小提琴：jsFiddle

Answer 1

没有child功能。您可能想要使用儿童，但更具选择性更清洁。用这个 ：

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

示范

Answer 2

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

这是一个更新的小提琴。

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

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

Answer 3

你可以试试这个

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