用slideToggle添加/移除类

Adding / removing class with slideToggle

本文关键字：slideToggle 添加      更新时间：2023-09-26

当点击标题时，菜单(ul/li)使用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');
});

你可以试试，看看是否符合你的需求:

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

尝试使用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')可能太通用了。

您需要像这样使用:

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

相关文章：