0

我目前有这个结构：

<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>

基本上我想做的是；

  1. 单击 first 中的第一个li a元素。UL一个类active被添加到列表元素中。到目前为止，我已经使用$(this).parents('li').addClass("active");

  2. 下一个UL sub_topic_category显示（我已经通过 CSS 完成并且它有效）取决于哪个列表元素处于活动状态。

  3. 这是我坚持的部分。我现在只需要在sub_topic_category显示的更改类中创建列表元素。单击一个列表元素a标记时，该类active将添加到li单击的链接的父级，并且active仅在该子主题列表中删除前一个类。

因此，例如在显示的代码中，我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 列表中的活动元素。

任何帮助，将不胜感激。

4

1 回答 1

1

你需要这个点击A-

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

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

于 2013-06-21T15:14:36.870 回答