Question

我目前有这种结构：

<ul id="topic_categories">
    <li><a href="">Type 1</a></li>
    <li><a href="">Type 2</a></li>
    <li><a href="">Type 3</a>
        <ul class="sub_topic_categories">
            <li><a class="tooltip" href="">A</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">B</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">C</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">D</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">E</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">F</a><a href=""><img src=""></a></li>
            <li class="active"><a class="tooltip" href="">G</a><a href=""><img src=""></a></li>
        </ul>
    </li>
    <li class="active"><a href="">Type4</a>
        <ul class="sub_topic_categories">
            <li><a class="tooltip" href="">A</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">B</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">C</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">D</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">E</a><a href=""><img src=""></a></li>
            <li><a class="tooltip" href="">F</a><a href=""><img src=""></a></li>
            <li class="active"><a class="tooltip" href="">G</a><a href=""><img src=""></a></li>
        </ul>
    </li>
</ul>

基本上我想做的是;

点击第一个li a中的第一个UL元素。将一类active添加到列表元素中。到目前为止，我已使用$(this).parents('li').addClass("active");
显示下一个UL sub_topic_category（我已经通过CSS完成此操作），具体取决于处于活动状态的列表元素。
这是我坚持的部分。我现在只需在sub_topic_category显示的更改类中生成列表元素。单击一个列表元素a标记后，类active将添加到已点击的链接的li父级，并且仅在子主题列表中删除之前的active类。< / p>

例如，在显示的代码中，我Type4在第一个UL内设置为有效。第二个列表显示sub_topic_categories，第一个列表元素（如浏览器所示）通过硬编码HTML设置为活动状态。当我说点击A时，我希望active从列表元素G中删除，然后添加到A。这必须只影响此sub_topic_category列表。

我希望我已经很好地解释了这一点。目前我有

$('#topic_categories li ul.sub_topic_categories li.active').removeClass('active');

有效，但它也删除了Type3 sub_topic_categories列表中的活动元素。

任何帮助都将不胜感激。

Answer 1

您需要点击A -

$(this).closest('ul').find('li.active').removeClass('active');
$(this).closest('li').addClass('active')

演示-------> http://jsfiddle.net/NrGGz/

基于外部列表元素单击删除嵌套列表元素的类？

1 个答案: