Question

所以我正在学习jQuery / JavaScript。我相信标题说这一切都试图得到一个div部分设置为display: none显示，同时慢慢滑下按钮点击

根据jQuery手册，W3schools以及我尝试阅读的其他几个地方，这就是我想出来的。不用说它看起来不漂亮。

我的逻辑是代码应该在按钮点击hench上执行我把onclick事件处理程序放到按钮元素。

function showPackages(){
  $('#submitBtn').on('click', function(){
    $('#showPackages').slideDown('slow', function(){
      $('#showPackages').css('display', 'inline');
    });
  });
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel-group" id="dispPackages" style="display: none">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
      </div>
    </div>
  </div>
</div>

任何帮助/建议表示赞赏。

Answer 1

首先，您必须将bind 事件处理程序分开。

function showPackages(){
    $('#submitBtn').on('click', function(){
      $('#showPackages').slideDown('slow', function(){
        $('#showPackages').css('display', 'inline');
      });
    });
}

当您每次点击输入时都在写，它会在您的submitBtn附加一个点击事件处理程序。

将其更改为：

function showPackages(){

}
$('#submitBtn').on('click', function(){

});
$('#showPackages').slideDown('slow', function(){
    $('#showPackages').css('display', 'inline');
});

但是，如果您想自动触发事件，请使用.trigger()方法。

function showPackages(){
    $('#submitBtn').trigger('click');
    $('#showPackages').trigger('slideDown');
}

Answer 2

试试这个

显示和隐藏可以使用不同的效果来完成

hide（）和show（）
fadeIn（），fadeOut（）和fadeToggle（）
slideUp（），slideDown（）和slideToggle（）

*在您的情况下，您需要幻灯片效果，所以只需使用 slideToggle（）

＆＃13;

$('#submitBtn').on('click', function(){
//$('#dispPackages').slideToggle('slow')   this will set display:block   
$('#dispPackages').slideToggle('slow').css("display","inline-block");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<button id="submitBtn">clickhere</button>

<div class="panel-group" id="dispPackages" style="display: none">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
      </div>
    </div>
  </div>
</div>

＆＃13;

jQuery元素显示并在按钮单击时向下滑动

2 个答案: