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");

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

Answer 1

为此，我使用以下代码：

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

将带有“您的ID”的ID属性分配给需要更改的元素，例如<div>。单击后，“ TheClassToBeChangedTo”将更改为“ 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>中，请参见下面的代码段。

$(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.

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

1 个答案: