Javascript 单击（）不工作

我的页面上有两种类型的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>

JS/jQuery

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

---

还有，这是小提琴：

没有

子函数。你可能想用它，但它更干净，更具选择性。使用以下命令：

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

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

这里是一个更新的

您可以使用jQuery中的
.children（）
方法来选择子元素，但正如其他人所提到的
.children（）
不是一种方法。
您可以尝试此方法

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

@没有。你测试过吗？对不起，我忘了“this”关键字，我真的很抱歉（@AreebSiddiqui您是否注意到
$（“.sub item”，this）
中的
this
？它限制了搜索。@landons我不认为它更干净。它不适用于中间元素层，它更干净，只显示隐藏的内容。@dystroy是这样，但您的方式不适用于更多级别的子项；）请注意，
document.ready
在带有默认设置的JSFIDLE和HTML文档中都是无用的，如果脚本像通常建议的那样位于正文末尾的脚本元素中。尽管如此，我还是很高兴地指出jQuery库没有包含在fiddle so+1中。我不知道关于JSFIDLE的这一点，谢谢你的提示！这是我在看他的小提琴时添加的第一件事，当时我注意到jQuery没有加载
    $(document).ready(function() {
        $(".item").click(function () {
            $(this).children('.sub-item').show();
        });
    });

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