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

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