javascript - 简单的 jQuery 可扩展 div 需要更改箭头吗？

Question

我正在尝试在展开 div 时切换箭头，请参阅

$(document).ready(function() {
  $('.expandableCollapsibleDiv').click(function() {
var showElementDescription = $(this).find('ul');
   // var showElementDescription = $(this).parents('.expandableCollapsibleDiv').find('ul');
    if ($(showElementDescription).is(':visible')) {
      showElementDescription.hide("fast", "swing");
      $(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up');
    } else {
      showElementDescription.show("fast", "swing");
      $(this).find($('.fa')).removeClass('fa-angle-up').addClass('fa-angle-down');
    }
  });
});

.expandableCollapsibleDiv i {
  cursor: pointer;
  margin-right: 10px;
  margin-top: 5px;
  padding-left: 10px;
  float: right;
}

.expandableCollapsibleDiv ul {
  border-bottom: 1px solid white;
  clear: both;
  list-style: outside none none;
  margin: 0;
  padding-bottom: 10px;
  display: none;
  /* visibility: hidden;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="mainDiv">
  <div class="expandableCollapsibleDiv">
    <i class="fa fa-2x fa-angle-down"></i>
    <h3><a>NEW YORK</a></h3>
    <ul>
      <li><a>Albany</a></li>
      <li><a>Buffalo</a></li>
      <li><a>Kingston</a></li>
      <li><a>Tonawanda</a></li>
      <li><a>Sherrill</a></li>
      <li><a>Sherrill</a></li>
      <li><a>Oneida</a></li>
    </ul>
  </div>
  <div class="expandableCollapsibleDiv">
    <i class="fa fa-2x fa-angle-down"></i>
    <h3><a>CALIFORNIA</a></h3>
    <ul>
      <li><a>Alameda</a></li>
      <li><a>Bell</a></li>
      <li><a>Banning</a></li>
      <li><a>Campbell</a></li>
      <li><a>Fresno</a></li>
      <li><a>Galt</a></li>
      <li><a>Jackson</a></li>
    </ul>
  </div>
  <div class="expandableCollapsibleDiv">
    <i class="fa fa-2x fa-angle-down"></i>
    <h3><a>WASHINGTON</a></h3>
    <ul>
      <li><a>Asotin</a></li>
      <li><a>Bellingham</a></li>
      <li><a>Bothell</a></li>
      <li><a>Camas</a></li>
      <li><a>Clarkston</a></li>
      <li><a>Cheney</a></li>
      <li><a>Newport</a></li>
    </ul>
  </div>
</div>

问题是，在页面加载时，div 设置为显示:无并且未设置可见的 css。箭头没有应有的 react 。我喜欢当 div 未展开(隐藏)时箭头指向下方，如果 div 展开(可见)则箭头指向上方。使用 visible:hidden 没有解决我的问题，因为 div 正在使用页面上的空间。

我该如何解决这个问题？

Answer 1

您错误地使用了 .find()。此外，JQuery 库未包含在 JSFiddle 中，所以我包含了它!

注意:最初箭头应该是 fa-angle-up 而不是 fa-angle-down。

之前:

$(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up');

之后:

$(this).find('.fa').removeClass('fa-angle-down').addClass('fa-angle-up');

JSFiddle Demo

$(document).ready(function() {
  $('.expandableCollapsibleDiv').click(function() {
var showElementDescription = $(this).find('ul');
   // var showElementDescription = $(this).parents('.expandableCollapsibleDiv').find('ul');
    if ($(showElementDescription).is(':visible')) {
      showElementDescription.hide("fast", "swing");
      $(this).find($('.fa')).removeClass('fa-angle-down').addClass('fa-angle-up');
    } else {
      showElementDescription.show("fast", "swing");
      $(this).find($('.fa')).removeClass('fa-angle-up').addClass('fa-angle-down');
    }
  });
});

.expandableCollapsibleDiv i {
  cursor: pointer;
  margin-right: 10px;
  margin-top: 5px;
  padding-left: 10px;
  float: right;
}

.expandableCollapsibleDiv ul {
  border-bottom: 1px solid white;
  clear: both;
  list-style: outside none none;
  margin: 0;
  padding-bottom: 10px;
  display: none;
  /* visibility: hidden;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="mainDiv">
  <div class="expandableCollapsibleDiv">
    <i class="fa fa-2x fa-angle-down"></i>
    <h3><a>NEW YORK</a></h3>
    <ul>
      <li><a>Albany</a></li>
      <li><a>Buffalo</a></li>
      <li><a>Kingston</a></li>
      <li><a>Tonawanda</a></li>
      <li><a>Sherrill</a></li>
      <li><a>Sherrill</a></li>
      <li><a>Oneida</a></li>
    </ul>
  </div>
  <div class="expandableCollapsibleDiv">
    <i class="fa fa-2x fa-angle-down"></i>
    <h3><a>CALIFORNIA</a></h3>
    <ul>
      <li><a>Alameda</a></li>
      <li><a>Bell</a></li>
      <li><a>Banning</a></li>
      <li><a>Campbell</a></li>
      <li><a>Fresno</a></li>
      <li><a>Galt</a></li>
      <li><a>Jackson</a></li>
    </ul>
  </div>
  <div class="expandableCollapsibleDiv">
    <i class="fa fa-2x fa-angle-down"></i>
    <h3><a>WASHINGTON</a></h3>
    <ul>
      <li><a>Asotin</a></li>
      <li><a>Bellingham</a></li>
      <li><a>Bothell</a></li>
      <li><a>Camas</a></li>
      <li><a>Clarkston</a></li>
      <li><a>Cheney</a></li>
      <li><a>Newport</a></li>
    </ul>
  </div>
</div>