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

<parent>
    <optional>
        <child>a</child>
    </optional>
</parent>
<parent>
    <child>b</child>
</parent>

.addRemove（）应更改为.removeClass（）;

Answer 2

已更新：如果您希望SlideDown and slideUp正常工作，请先试用。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

试试这个：$(this).closest('div')会返回.holder div，但你需要$(this).parent().next("div").is(':visible') div .menu来显示和隐藏。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

另一种选择可以像这样使用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

这是你想要的吗？

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;