使用jquery更改元素/类

Question

我是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');
    });

});

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

所以第二部分是加号。当我单击“加号”时，子菜单将滑入，“加号”更改为“减号”，但当我单击“返回”时，它不会更改为“加号”。

有人知道它为什么不起作用吗?或者可以解释一下，我是怎么做到的？

你好，马库斯

Answer 1

问题是，您的选择器正在尝试查找一个span，其中包含plusicon和vertical类，但是在第一次调用以下内容之后：

$(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');
});

Answer 2

这样做：

$('.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");
        }
    });

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

Answer 3

我希望这会有所帮助。

点数：

1. 查找元素好使用find()；
2. 更好的切换1类显示隐藏元素，如“显示”的例子；
3. 在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>

​