Question

我使用幻灯片（http://plugins.adchsm.me/slidebars/）为我的网站生成推送菜单。当非画布菜单打开时，会添加名为“sb-active-left＆＃39;”的课程。

我希望它根据菜单是打开还是关闭来更改菜单图标。

HTML

<div class="fixed sb-slide">
    <a class="sb-toggle-left"><i class="icon"></i></a>
</div>

JS

if ($(".sb-active-left")[0]){
    $('.sb-toggle-left .icon').addClass('icon-remove');
}

else {
    $('.sb-toggle-left .icon').addClass('icon-menu');
}

Answer 1

使用jQuery的hasClass（）方法....

if ( $elem.hasClass('sb-active-left') ) {
     do something
}

http://api.jquery.com/hasClass/

Answer 2

Slidebars为您提供此功能，只需使用CSS样式查看Slidebars使用文档的帮助程序类：http://plugins.adchsm.me/slidebars/usage.php

  当幻灯片打开时，
html.sb-active存在。
     当左侧滑动条打开时，
html.sb-active-left存在。
     当正确的Slidebar打开时，
html.sb-active-right出现。

您可以使用这样的样式在任何侧边栏打开时更改样式

html.sb-active .navbar .sb-toggle-left
{
  background-image: url(../someimage.png);
}

或更具体地说，仅在左侧边栏打开时仅更改左侧图标

html.sb-active-left .navbar .sb-toggle-left
{
  background-image: url(../someimage.png);
}

根据您的javascript，您似乎可以从以下位置更改班级中的选择器：

.icon-remove
{
   // do icon-remove stuff
}

.icon-menu
{
   // do icon menu stuff
}

到

html.sb-active-left .navbar .sb-toggle-left
{
     // do icon-remove stuff
}

.navbar .sb-toggle-left
{
     // do icon-menu stuff
}

您可以删除相应的javascript。

Answer 3

看起来你可以从css中做你想做的一切......

.sb-toggle-left .icon {
  // default formatting, like icon-remove
}

.sb-toggle-left.sb-active-left .icon {
  // formatting for active menu item, like icon-menu
}

您需要在此处寻找纯CSS解决方案。 javascript的问题在于您必须监视更改，因为Slidebar库可能会根据特定事件添加或删除类。（如果你确实使用过JQuery，那么你正在寻找hasClass方法）

Answer 4

使用hasClass（）函数进行检查。

$(".action").click(
    function() {
        if($(this).hasClass("red")) {
             $(this).removeClass("red");
             $(this).addClass("yellow");
    } else {
             $(this).removeClass("yellow");
             $(this).addClass("red");
    }
});

http://jsfiddle.net/j6bNR/这是一个演示

Answer 5

根据您的问题，我认为您正在使用FA或其他图标集，并希望更改类，因此CSS解决方案确实无法提供帮助。

不幸的是，由于事件还没有使用Slidebars，我会控制API，因此您可以在需要时执行额外的代码。

首先，在启动插件时，您需要定义自己的Slidebars实例。

var yourVariable = new $.slidebars()

您现在不必使用标准控件类，并可以将Slidebars控件映射到您自己的元素。

HTML

<div class="fixed sb-slide">
  <i id="menu-toggle" class="icon"></i>
</div>

JS

var yourVariable = new $.slidebars( {
    siteClose: false
});

// Cache toggle.
var toggle = $( '#menu-toggle' );

toggle.on( 'click', function( event ) {
    // Stop event propagation and behaviour.
    event.stopPropagation();
    event.preventDefault();

    // Toggle the left Slidebar
    yourVariable.slidebars.toggle( 'left' );

    // Change icon classes
    toggle.toggleClass( 'your-open-class your-close-class' );
} );

$( '#sb-site' ).on( 'click', function( event ) {
    // Stop event propagation and behaviour.
    event.stopPropagation();
    event.preventDefault();

    // Make sure left Slidebar is open, close it and change icons.
    if ( yourVariable.slidebars.active('left') ) {
        yourVariable.slidebars.close();
        toggle.addClass( 'your-close-class' ).removeClass( 'your-open-class' );
    }
} );

我也把它设置成小提琴，所以你可以看到它正常工作。

http://jsfiddle.net/2mX79/2/

我希望这会有所帮助。

谢谢，亚当

如果存在另一类，则更改班级

5 个答案: