在使用jQUERY单击并关闭css时，展开css的高度

Question

当单击显示银行列表并选择银行图标时，我试图将css的高度扩展到200，但是当单击相同的按钮时，我希望将css的高度从200关闭到102。

我们该怎么做？

​

$('#moreBanking').click(function() {
  $('.bank_list').css("height", "200px");
});

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

<div name="bankDisplay2" class="bank_list_main">
  <ul data-bind="foreach: thirdPayBank" class="bank_list" style="height: 102px;">
    <li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.netbankCssClass($data), click: $root.netBankSelectBank" data-key="华夏银行" data-code="HXB" class="bank_17">
      <a href="javascript:void(0)" class="bank"></a>
    </li>

    <li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.netbankCssClass($data), click: $root.netBankSelectBank" data-key="福建兴业银行" data-code="CIB" class="bank_11">
      <a href="javascript:void(0)" class="bank"></a>
    </li>
  </ul>
  <span id="moreBanking">更多银行</span>
</div>

<span id="moreBanking">更多银行</span> 
<< button

​

Answer 1

我不对初始高度使用内联样式，而是切换一个类，如：

JS Fiddle

CSS：

.bank_list {
    height: 102px;
 }
.tall {
    height: 200px;
}

Jquery：

$('#moreBanking').click(function(){
  $('.bank_list').toggleClass('tall'); // Will add/remove class on each click
});

Answer 2

做这样的事怎么样？

var more = $('#moreBanking')
var list = $('.bank_list')
more.click(function() {
    if (list.classList.contains('bank_list--open') {
        list.classList.remove('bank_list--open')
        list.css("height","102px");
    } else {
        list.classList.add('bank_list--open')
        list.css("height","200px");
    }
});

Answer 3

一种解决方案是使用两个类，expanded_bank_list和bank_list。

.expanded_bank_list {
    height: 200px;
}

然后在他们之间切换

$('#moreBanking').click( function() {
    if ($('.bank_list').hasClass('expanded_bank_list')) {
        $('.bank_list').removeClass('expanded_bank_list');
    } else {
        $('.bank_list').addClass('expanded_bank_list');
    }
} );