使用jquery更改/中的元素/类

Change elements/classes in/with jquery

本文关键字：元素 更改 使用 jquery      更新时间：2023-09-26

我是jQuery新手，现在用它来做导航，在移动设备或小视图中滑动。这工作得很好，但我使用一个加号图标来打开子菜单，当子菜单打开时，它会变成一个减号图标。

但是当子菜单关闭时，它不会变回加号图标。

代码如下:

$(document).ready(function() {
    $('<span class="menu-expander"><span class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');

    $('#menu-toggle').click(function() {
        $(this).next('#navigation-main').slideToggle();
    });
    $('.menu-expander').click(function() {
        $(this).prev('.level_2').slideToggle();
        $(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');
    });
});

我认为"有趣"的部分可能是第二个功能，第一个仍然是一个汉堡包图标，打开导航，那工作(好吧，它不显示滑动动画，第二个做什么…不知道，为什么它不工作…)。

第二部分是加号。当我点击加号时，子菜单滑进来，加号变成减号，但当我点击减号时，它不会变回加号。

有谁知道为什么它不工作或可以解释我，我怎么做它的工作?

问候,马库斯

问题是，您的选择器试图找到plusicon和vertical类的span，但在第一次调用此:

$(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');

删除所述类，它无法找到您的目标span。

为了解决这个问题，你可以为你的图标指定一个id (iconId在下一个例子中)或另一个类，这样它就可以总是被找到 
$('<span class="menu-expander"><span id="iconId" class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');
...
$('.menu-expander').click(function() {
  $(this).prev('.level_2').slideToggle();
  $(this).children('#iconId').toggleClass('plusicon vertical');
});

这样做:

$('.menu-expander').click(function() {
        $(this).prev('.level_2').slideToggle();
        var $icon = $(this).children('#ID OF ELEMENT'); // Would be easier to add an ID to your element whcih you want to alter - limits the error possibilties :)
        if($icon.hasClass("CLASS YOU WANT TO GET RID OF"){
          $icon.removeClass("CLASS YOU WANT TO GET RID OF");
          $icon.addClass("THE CLASS YOU NEED");
        else{
          $icon.addClass("THE CLASS YOU WANT TO ADD");
        }
    });

我现在在工作，所以请原谅任何打字错误。您基本上需要检查将图标更改为减号的类是否仍然处于活动状态-如果是，则将其更改回来。

希望对你有帮助。

点:

  1. 最好切换1类来显示隐藏元素，例如"show";
  2. 使用js代码插入的元素最好使用.on()(将来);

$(document).ready(function() {
    $('<span class="menu-expander"><span class="plusicon horizontal">horizontal</span><span class="plusicon vertical show">vertical</span></span>').insertAfter('.level_2');
    $('#menu-toggle').click(function() {
        $('#navigation-main').slideToggle();
    });
    $('.menu-expander').click(function() {
        $(this).prev('.level_2').slideToggle();
      $(this).find('.plusicon').toggleClass('show');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
    .plusicon {display:none}
    .show {display:block!important}
</style>
<ul>
    <li id="menu-toggle" class="level_2">Toggle</li> 
</ul>
<ul id="navigation-main">
    <li>test</li>
</ul>

相关文章：