JQuery SlideDown向下滑动，然后备份

Question

这看起来应该很简单，但是当我的项目向下滑动时，无论我是否点击它，它都会立即向上滑动。

的JavaScript

var jq = jQuery.noConflict();
jq(document).ready(function() {
    jq('.btn-slide').click(function() {
        jq('.show-buttons').slideDown(150);
    });
    jq('.btn-slide').click(function() {
        jq('.show-buttons').slideUp(500);
    });  
});

HTML

<div class="top-button-container">                      
     <ul class="top-top">       
          <li><a class='btn-slide thb-btn top-buttons' href='#'>VIEW HOMES</a></li>
          <li class="show-buttons"><a class='thb-btn top-buttons' href='/deals' ><i class='fa fa-home'></i> NEW HOME DEALS</a></li>
          <li class="show-buttons"><a class='thb-btn top-buttons' href='http://testing.com' ><i class='fa fa-home'></i> PRE-OWNED</a></li>
     </ul>
</div>

测试环境：https://www.w3schools.com/code/tryit.asp?filename=FG1ZDK5KDO2L

Answer 1

这是因为您的点击功能都会启动。您可以使用slidetoggle而不是一次。

jq('.btn-slide').click(function(){

（”。显示-按钮）。

JQ的slideToggle（150）;     }）;

或者如果您想要不同的时间，您可以通过css检查项目是否可见

jq('.btn-slide').click(function(){
 if (jq('.show-buttons').css('display')=='block')
 jq('.show-buttons').slideDown(500);
else
 jq('.show-buttons').slideUp(150);
 });