时间戳

首页 > 解决方案 > 如何使用 Jquery 从下一个父 li 元素中添加和删除类

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>

我的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元素内删除，反之亦然。请帮忙。

标签： javascriptjqueryhtml

解决方案

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

$(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>，请参见下面的代码段。

$(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。请在此处查看操作方法或示例。

推荐阅读