javascript - 当前父元素的子元素选择器

Question

我有一个类别列表。我希望在单击相应类别时切换我的每个类别项目。

我做了下面的代码。但是，当我单击任何类别时，所有类别项目都会切换。我认为问题出在我的选择器上。我现在应该做什么改变。

HTML

<div class="nav">
    <ul>
        <li class="main_category">Category1</li>
            <div class="sub_category" style="display: none;">
                <ul>
                    <li>Item1</li>
                    <li>Item2</li>
                </ul>
            </div>
        <li class="main_category">Category2</li>
            <div class="sub_category" style="display: none;">
                <ul>
                    <li>Item1</li>
                    <li>Item2</li>
                </ul>
            </div>
    </ul>
</div> 

jQuery

$(document).ready(function() {
    $("li.main_category").click(function() {
        $(".sub_category").slideToggle();
    });
});

Answer 1

如果您不想更改 HTML 标记(假设该项目将 div 保留在 li 旁边):

$(document).ready(function() {
    $("li.main_category").click(function() {
        $(this).next().slideToggle();
    });
});

但是，我建议您稍微更改一下标记(因为您不需要或可能不希望列表中包含 div)，以便它更清晰:

<div class="nav">
        <ul>
            <li class="main_category">Category1
                    <ul style="display:none">
                        <li>Item1</li>
                        <li>Item2</li>
                    </ul>
                </li>
            <li class="main_category">Category2
                    <ul style="display:none">
                        <li>Item1</li>
                        <li>Item2</li>
                    </ul>
                </li>
        </ul>
</div> 

脚本:

$(document).ready(function() {
    $("li.main_category").click(function() {
        $(this).children("ul").slideToggle();
    });
});