slideUp() 和 slideDown() 在 jquery 中不起作用

Question

我在代码中使用了slideDown和slideUp。 slideDown 工作正常，但 slideUp 不工作。有人可以纠正我吗？我是 javascipt 的新手。我不确定我做的是否正确。

<div class="footer">
<div class="holder">
    <a class="btn-site">
        <span>More Stuff</span>
    </a>
</div>              
<div class="menus">
    <ul class="menu-content">
        <li><a href="">Stuff1</a></li>
        <li><a href="">Stuff2</a></li>
        <li><a href="">Stuff3</a></li>
        <li><a href="">Stuff4</a></li>
    </ul>
</div>

这是脚本：

$('.btn-site').on('click',function() {  
    if($(this).closest('div').is(':visible')){  
        $('.menus').slideDown('slow');
        $('span').addClass('arrw_down');        
    }else{
        $('.menus').slideUp('fast');
        $('span').removeClass('arrw_down'); 
    }
});

Answer 1

$('.btn-site').on('click',function() {  
    $( ".menus" ).slideToggle( "slow", function() {
        if($('span').hasClass('arrw_down')){  
            $('span').removeClass('arrw_down');        
        }else{
            $('span').addClass('arrw_down');   
        }
    });
});

.addRemove() 应该改为 .removeClass();

Answer 2

更新：如果你想让你的SlideDown and slideUp工作，试试第一个。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('.btn-site').on('click',function() {  
if($(this).parent().next("div").is(':visible')){  
 $(this).parent().next("div").slideUp('slow');
    $('span').addClass('arrw_down');        
}else{
 $(this).parent().next("div").slideDown('fast');
    $('span').removeClass('arrw_down');   
}
});
});

</script>

<div class="footer">
<div class="holder">
    <a class="btn-site">
        <span>More Stuff</span>
    </a>
</div>              
<div class="menus">
    <ul class="menu-content">
        <li><a href="">Stuff1</a></li>
        <li><a href="">Stuff2</a></li>
        <li><a href="">Stuff3</a></li>
        <li><a href="">Stuff4</a></li>
    </ul>
</div>

试试这个：$(this).closest('div') 将 return .holder div 但你需要为 .menu [=39= 获得 $(this).parent().next("div").is(':visible') ] 显示和隐藏。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.btn-site').on('click',function() {  
 //console.log($(this).parent().next("div").is(':visible'));
if($(this).parent().next("div").is(':visible')){  
    $('.menus').hide('slow');
    $('span').addClass('arrw_down');        
}else{
    $('.menus').show('fast');
    $('span').removeClass('arrw_down');   
}
});
});

</script>

<div class="footer">
<div class="holder">
    <a class="btn-site">
        <span>More Stuff</span>
    </a>
</div>              
<div class="menus">
    <ul class="menu-content">
        <li><a href="">Stuff1</a></li>
        <li><a href="">Stuff2</a></li>
        <li><a href="">Stuff3</a></li>
        <li><a href="">Stuff4</a></li>
    </ul>
</div>

另一个选项可以像这样使用 slideToggle：

$(document).ready(function(){
    $('.btn-site').on('click',function() {  
        $( ".menus" ).slideToggle( "slow", function() {
            if($('span').hasClass('arrw_down')){  
                $('span').removeClass('arrw_down');        
            }else{
                $('span').addClass('arrw_down');   
            }
        })
    });
});

Answer 3

这是你想要的吗？

$('.btn-site').on('click',function() {  
    if($(this).closest('div').is(':visible')){  
        $('.menus').slideToggle('slow');
        $('span').toggleClass('arrw_down');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="footer">
<div class="holder">
    <a class="btn-site">
        <span>More Stuff</span>
    </a>
</div>              
<div class="menus">
    <ul class="menu-content">
        <li><a href="">Stuff1</a></li>
        <li><a href="">Stuff2</a></li>
        <li><a href="">Stuff3</a></li>
        <li><a href="">Stuff4</a></li>
    </ul>
</div>

slideUp() 和 slideDown() 在 jquery 中不起作用

slideUp() and slideDown() does not work in jquery

jquery

slidedown

slideup