使用slideToggle添加/删除类

单击某个标题时，会使用slideToggle向下/向上滑动菜单（ul/li）。作为标题的背景，如果菜单不可见，则向下指向一个箭头，否则向上（我有两个类，'arrow-up'和'arrow-down'为背景）。使用slideToggle添加/删除类

下面是我试过的，但它不起作用。什么是一个好的解决方案？

$j('h3.sub-menu-dropdown-btn').click(function(){ 

    if ($j('ul').is(":visible")) { 
     $j(this).removeClass('arrow-up'); 
     $j(this).addClass('arrow-down'); 
    } else { 
     $j(this).removeClass('arrow-down'); 
     $j(this).addClass('arrow-up'); 
    } 

    $j('.sub-menu-dropdown').slideToggle('fast'); 

});

来源

2014-03-27 holyredbeard

你可以试试，看看它是否适合您的需要：

$j('h3.sub-menu-dropdown-btn').click(function(){ 
    var $self = $j(this); 
    $j('.sub-menu-dropdown').slideToggle('fast', function(){ 
     $self.toggleClass('arrow-up arrow-down'); 
    }); 
});

来源

2014-03-27 14:08:47

这是真棒，而且还是一种魅力！非常感谢！ – holyredbeard

不客气！ –

尝试使用hasClass（）：https://api.jquery.com/hasClass/

$j('h3.sub-menu-dropdown-btn').click(function(){ 

    if ($j('ul').hasClass('arrow-up')) { 
     $j(this).removeClass('arrow-up'); 
     $j(this).addClass('arrow-down'); 
    } else { 
     $j(this).removeClass('arrow-down'); 
     $j(this).addClass('arrow-up'); 
    } 

    $j('.sub-menu-dropdown').slideToggle('fast'); 

});

此外，没有看到我无法验证此html标记，选择器$j('ul')可能太笼统了。

来源

2014-03-27 14:09:35 sfyn

但$ j（'ul'）不是'this'，我想它没有设置这些类 –

您需要使用这样的：

if($j("ul").is(":visible")==true){

来源

2014-03-27 14:17:45

使用slideToggle添加/删除类

回答

相关问题