Javascript 如何使用Jquery从下一个父li元素添加和删除类

我需要使用Jquery根据li元素添加/删除类。我在下面解释我的代码

<li class="dropdown mega-drop pstatic"><a href="#" class="mainmenuitem">Programs <span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
    <ul class="dropdown-menu mega-h-drop-menu fwidth activeul">
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Business</a>
            <ul class="dropdown-menu s-drop">
                <li><a href="#">Business Office Administration</a></li>
            </ul>
        </li>
        <li class="pstatic"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Health Care &amp; Administration </a>
            <ul class="dropdown-menu mega-v-drop-menu w-100">
                <div class="row fullmenu">
                    <div class="col-sm-6 pull-left">
                        <ul>
                            <li><a href="#">Health Services Administation</a></li>
                            <li><a href="#">Limited Scope X-Ray Technician </a></li>
                            <li><a href="#">Medical Front Office And Billing </a></li>
                        </ul>
                    </div>
                    <div class="col-sm-6 pull-left">
                        <ul>
                            <li><a href="#">Dental Assistant </a></li>
                            <li><a href="#">Medical Assistant Technician </a></li>
                            <li><a href="#">Patient Care Technician</a></li>
                        </ul>
                    </div>
                </div>
            </ul>
        </li>
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">HVAC</a>
            <ul class="dropdown-menu s-drop">
                <li><a href="#">Heating, Ventilation, and Air Conditioning</a></li>
            </ul>
        </li>
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Information Technology</a>
            <ul class="dropdown-menu s-drop">
                <li><a href="#">Computer And Network Technician</a></li>
                <li><a href="#">Information Technology</a></li>
            </ul>
        </li>
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Nursing</a>
            <ul class="dropdown-menu s-drop">
                <li><a href="#">Nursing</a></li>
            </ul>
        </li>
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Cosmetology</a>
            <ul class="dropdown-menu s-drop">
                <li><a href="#">Cosmetology</a></li>
            </ul>
        </li>
    </ul>
</li>
<li class="dropdown mega-drop"><a href="#" class="mainmenuitem">mega  <span class="caret" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
    <ul class="dropdown-menu mega-h-drop-menu activeul firststepmegamenu">
        <div class="megacontainer">
            <div class="row">
                <div class="col-md-2five">
                    <div class="title first">
                        <p>Los Angeles</p>
                    </div>
                    <ul>
                        <li><a href="#">Jacksonville</a></li>
                        <li><a href="#">Orlando</a></li>
                        <li><a href="#">Houston </a></li>
                    </ul>
                </div>
                <div class="col-md-2five">
                    <div class="title">
                        <p>San Diego</p>
                    </div>
                    <ul>
                        <li><a href="#">Jacksonville</a></li>
                        <li><a href="#">Orlando</a></li>
                        <li><a href="#">Houston </a></li>
                    </ul>
                </div>
                <div class="col-md-2five">
                    <div class="title">
                        <p>Bakersfeild</p>
                    </div>
                    <ul>
                        <li><a href="#">Jacksonville</a></li>
                        <li><a href="#">Orlando</a></li>
                        <li><a href="#">Houston </a></li>
                    </ul>
                </div>
                <div class="col-md-2five">
                    <div class="title">
                        <p>Secramento</p>
                    </div>
                    <ul>
                        <li><a href="#">Jacksonville</a></li>
                        <li><a href="#">Orlando</a></li>
                        <li><a href="#">Houston </a></li>
                    </ul>
                </div>
                <div class="col-md-2five">
                    <div class="title last">
                        <p>Atlanta</p>
                    </div>
                    <ul>
                        <li><a href="#">Jacksonville</a></li>
                        <li><a href="#">Orlando</a></li>
                        <li><a href="#">Houston </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </ul>
</li>

---

在这里，当用户单击span类（即-

main\u nav\u sub\u show

和

caretrotate

）时，将在该

li

元素中添加，并从其他父

li

元素中删除，反之亦然。请帮助。

为此，我使用以下小代码：

$(function(){
$('#YourID').click(function(e) {
    $(this).toggleClass('TheClassToBeChanged').toggleClass('TheClassToBeChangedTo');
});
});

将带有“YourID”的ID属性分配给必须更改的元素，例如a

。单击“更改类别”将更改为“更改类别”

如果有多个元素要更改其类，只需复制/粘贴上面的脚本并为它们指定自己的值即可

$（函数（）{
$（“#YourID”）。单击（函数（e）{
$（this.toggleClass（'TheClassToBeChanged'）。toggleClass（'TheClassToBeChangedTo'）；
});
});
。要更改的类{
宽度：200px；
背景：红色；
高度：100px；
}
.课程更改为{
宽度：100px；
背景：蓝色；
高度：200px；
}

您是否尝试切换类？是的，但无法按预期进行切换。我只想扩展当前li并关闭rest li。您是否正在创建自己的手风琴组件？使用该类是可行的，但问题是在正确单击时添加/删除。这里我需要添加两个类。请查看我的帖子。这里的场景与您发布的答案不同，它类似于展开/折叠功能。这是您在CSS中使用
display:none或<代码>高度：0和是另一个问题。你问的是如何更改元素上的类，而不是如何创建展开/折叠函数我的答案中的外观。我在这里添加了一个链接，我正在添加/删除该类，其他类不更改任何类。
$(function(){
$('#YourID').click(function(e) {
    $(this).toggleClass('TheClassToBeChanged').toggleClass('TheClassToBeChangedTo');
});
});