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

Question

我需要使用 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>

我的 javascript 代码如下。

$(".mainmenuitem .caret").on('click', function(event) {

})

$(".activeul").removeClass/addClass("main_nav_sub_show");
$(".caret").removeClass/addClass("caretrotate");

在这里，当用户单击 span 时，类（即main_nav_sub_show 和 caretrotate）将在该 li 元素内添加并从其他父 li 元素内删除，反之亦然。请帮忙。

Answer 1

为此，我使用了这个小代码：

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

将带有“YourID”的 ID 属性分配给必须更改的元素，例如<div>。单击“TheClassToBeChanged”后，将变为“TheClassToBeChangedTo”。

如果您想要更改多个元素的类，只需复制/粘贴上面的脚本并为它们分配自己的值。

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

.TheClassToBeChanged {
  width: 200px;
  background: red;
  height: 100px;
}

.TheClassToBeChangedTo {
  width: 100px;
  background: blue;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="TheClassToBeChanged" id="YourID"></div>

您可以为元素分配一个类，但它会清除属性内的所有内容。一种解决方案是使用上述脚本并输入现在存在的类以及单击后将存在的类。

另一种解决方案是将元素包装到 <span> 中，参见下面的 sn-p。

$(document).on('click', '.DontTryThisAtHome a', function(e) {
  $('.select a').unwrap()
  $(this).wrap("<span class='select'></span>");

});

.DontTryThisAtHome {
  background: blue;
}

.select a {
  background: red;
  border-radius: 5px;
  color: grey;
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DontTryThisAtHome">

  <p>
    <a href="#">Click</a>
    <br />
    <a href="#">Click here</a>
    <br />
    <a href="#">Click or here</a>
    <br />
    <a href="#">But not here</a>
  </p>

</div>

---

展开/折叠

这可以完全由 CSS 完成，您不需要任何 JS/jQuery。 Please see how or an example on how here.