jQuery Accordion 将类添加到当前 Href 及其父 Href

Posted 2023-05-09

【中文标题】jQuery Accordion 将类添加到当前 Href 及其父 Href

【英文标题】：jQuery Accordion Add Class to Current Href and Its Parent Href

【发布时间】：2014-05-01 03:12:18

【问题描述】：

在手风琴菜单中单击 href 时，我在向两个元素添加类时遇到问题。删除“当前”类的实例，将“当前”类添加到单击的子菜单项及其父项。我已经让手风琴工作了，只要我单击父菜单项并出现子菜单。在这个例子中，我的意思是我点击“第二个”，然后出现“项目 2.1”和“项目 2.1”。单击“Third”和“Second”，其子项被隐藏，Third 及其子项显示。我想要做的是，一旦单击一个孩子，将“当前”添加到该子 href 元素及其父 href （例如单击 href ID“two-one”并将“current”类添加到该元素以及到它的 "nav-subtitle" ID) 并从当前 href 中删除 "current" 类。

这是 html：-

        <ul id="navigation">

            <li>
                <a href="index.html" class="nav-subtitle current">
                    Home
                </a>       
            </li>

            <li> 
                <a href="#" class="nav-subtitle">
                Second
                </a>
                <ul>
                    <li><a href="#" id="two-one">Item 2.1</a></li>
                    <li><a href="#" id="two-two">Item 2.2</a></li>
                </ul>
            </li>

            <li>
                <a href="#" class="nav-subtitle">
                    Third
                </a>
                <ul>
                    <li><a href="#" id="three-one">Item 3.1</a></li>
                    <li><a href="#" id="three-two">Item 3.2</a></li>
                    <li><a href="#" id="three-three">Item 3.3</a></li>                      
                </ul>
            </li>
        </ul>

我尝试了以下 jQuery，但“父”元素最终将“当前”类添加到 li 元素，而不是带有类 nav-subtitle 的 href。如果我指定“nav-subtitle”ID，整个函数就会失败：-

$("#two-one").click(function()
        $( "#nav-subtitle" ).removeClass("current");
        $(this).parent().parent().parent("#nav-subtitle").addClass("current");   
        $(this).addClass("current");
);

【参考方案1】：

我相信这段代码可以满足我的需要。

$("#two-one").click(function()
        $('a.current').removeClass('current');
        $(this).parent().parent().siblings().addClass('current');
        $(this).addClass('current');
);

从具有“current”类的元素中删除“current”类，将“current”添加到父 href，最后将“current”类添加到单击的 href。