javascript - 我如何使用 jQuery 仅对我的 元素之一进行 .removeClass ('active' )？

Question

我在弄清楚如何从我的一个列表中删除类“active”时遇到一些问题。

我有一个导航栏:

<div class="container">
  <ul class="nav">
    <li class="active"><a href="#"></a>Home</li>
    <li><a href="#"></a>About</li>
    <li><a href="#"></a>Contact</li>
  </ul>
</div>

我的主页中还有一个菜单:

<div class="container_2">
  <ul>
    <li class="left-main-list active"><a href="#">Subject 1</a></li>
      <ul class="list-in-list">
        <li><a href="#">Sub subject 1</a></li>
        <li><a href="#">Sub subject 2</a></li>
      </ul>
    <li class="left-main-list><a href="#">Subject 2</a></li>
    <li class="left-main-list><a href="#">Subject 3</a></li>
  </ul>
</div>

当我浏览主页上的菜单时，我想在单击时将事件列表项类更改为事件状态，因此我现在有以下 jQuery 代码:

$(document).ready(function() {

     $('li').click(function() {
        $('li').removeClass('active'); 
        $(this).addClass('active'); 
    });

 });

这适用于我的菜单，类更改为当前类，但它也删除了我不想要的导航栏类。 :)

我尝试过类似的方法:

$(document).ready(function() {

    $('.left-main-list').click(function() {
       $('.left-main-list li').removeClass('active'); 
       $(this).addClass('active'); 
    });

});

我尝试过 '.left-main-list li' 和 'li.left-main-list' 但没有成功。

非常高兴回答这个问题，我希望我的问题(这次)比以前的问题更准确。 :)

/比尔

ps:如果您单击另一个子主题，但主项目仍然具有其事件类别，子主题和主主题是否可以同时处于事件状态，并且该子主题的事件类别是否会被删除？

Answer 1

While i browse my menu on the home page, i want to change the the active list items class to active when clicked

您可以只定位相关 div 中的 li，类似于:

$(document).ready(function() {
    var $listItems = $('div.container_2 li');

    $listItems.click(function() {
        $listItems.removeClass('active'); 
        $(this).addClass('active'); 
    });
 });

<小时/>

DEMO - 仅定位 .container_2 内的 li

<小时/>

Can a sub subject AND a main subject be active at the same time, and that sub subject's class of active, be removed if you for example click another sub subject, but the main item still have it's class of active?

仍然以容器为目标，您可以使用 jQuery 的 parent() ，类似于:

$(document).ready(function () {
    $('div.container_2 li').click(function () {
        var $this = $(this);
        var $children = $this.parent().find('li');

        $children.removeClass('active');
        $this.addClass('active');
    });
});

<小时/>

DEMO - 使用 parent() 允许事件菜单和子菜单，但主菜单更改时不允许

<小时/>

我研究了在位于不同主菜单元素内的子菜单之间切换时，使其更加动态地添加沿链向上的项目激活的可能性。

修复嵌套 ul 的 HTML，使嵌套 ul 位于 li 内部，而不是仅位于上部 内部ul 您可以进行完全动态的实现。

假设你的 HTML 是这样的:

<div class="container">
    <ul class="nav">
        <li class="active"><a href="#"></a>Home</li>
        <li><a href="#"></a>About</li>
        <li><a href="#"></a>Contact</li>
    </ul>
</div>
<div class="container_2">
    <ul>
        <li class="left-main-list active"><a href="#">Subject 1</a>

        </li>
        <li>
            <ul class="list-in-list">
                <li><a href="#">Sub subject 1</a>

                </li>
                <li><a href="#">Sub subject 2</a>

                </li>
                <li>
                    <ul class="list-in-list">
                        <li><a href="#">Sub subject 1</a>

                        </li>
                        <li><a href="#">Sub subject 2</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="left-main-list"><a href="#">Subject 2</a>

        </li>
        <li class="left-main-list"><a href="#">Subject 3</a>

        </li>
    </ul>
</div>

现在，使用以下脚本，当从子菜单更改为另一个主菜单项中的另一个子菜单时，您还可以使任何子菜单项的父菜单项处于事件状态，与此类似:

$(document).ready(function () {
    $('div.container_2 li>a').click(function () {
        var $this = $(this);
        var $relatedElements = $this.parents('ul').find('li');

        if($this.hasClass('active')){
            return;
        }

        $relatedElements.removeClass('active');
        $this.parent('li').addClass('active');

        var $parents = $this.parents('li');

        $parents.each(function(){
            $(this).not($this.parent()).prev().addClass('active');
        });
    });
});

<小时/>

DEMO - 链式激活

<小时/>

我认为这应该有所有可能的例子来帮助您从这里开始。

希望这有帮助。