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

Question

我试图在展开div时切换箭头，参见

＆＃13;

＆＃13;

$(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');
    }
  });
});

＆＃13;

.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;*/
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

问题，在页面加载时，div设置为display：none，而不是设置为css visible。箭头没有做出反应。当div未展开（隐藏）时，我喜欢箭头指向下方，如果div展开（可见），我喜欢指向。 使用visible：hidden didn解决了我的问题，因为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

＆＃13;

＆＃13;

$(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');
    }
  });
});

＆＃13;

.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;*/
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;