Question

以下toggleClass不起作用：

    $nav_item = $ ('.active_wrapper, .main_nav div.arrow_up_img, .main_nav div.arrow_down_img'),
    $arrow_down = $ ('.main_nav div.arrow_down_img'),
    $arrow_up = $ ('main_nav div.arrow_up_img');

    $('.active_wrapper').click(function(e){
        e.preventDefault();
        $('.main_nav div').not($nav_item).slideToggle('slow', function(){
            $(arrow_down).toggleClass($arrow_up);
        });

    });

HTML

        <nav class="main_nav">
            <div class="active_wrapper"><a href="#">Home</a>
                <div class="arrow_down_img"></div>
            </div>
            <div><a href="about.php">About Us</a></div> 
            <div><a href="flavours.php">Flavours</a></div>
            <div><a href="stockists.php">Stockists</a></div>
            <div><a href="thecollective.php">The collective</a></div>
            <div><a href="shop.php">Shop</a></div>
        </nav>

toggleClass用于交换2个箭头，一个向上，一个向下（你可以想象这是一个下拉菜单），但我真的无法弄清楚它为什么不起作用..

Answer 1

正确的代码是 $arrow_down.toggleClass('arrow_up_img');

Answer 2

   nav_item = $ ('.active_wrapper, .main_nav div.arrow_up_img, .main_nav div.arrow_down_img');
   arrow_down = $ ('.main_nav div.arrow_down_img');//missing semi colon
   arrow_up = $('main_nav div.arrow_up_img');//missing semi colon

$('.active_wrapper').click(function(e){
    e.preventDefault();
    $('.main_nav div').not(nav_item).slideToggle('slow', function(){
        arrow_down.toggleClass(arrow_up);//Invalid Object assignment
    });

});

Working Demo

jQuery toggleClass没有按预期工作

2 个答案: