根据手风琴可见性切换 class

Question

所以我真的不认为这应该这么难，但我已经研究了几个小时并搜索了 Stack，它帮助我达到了这一点，但并不是一直到我的位置需要。

我有一个 FAQ 页面的手风琴。这部分有效。如果我打开一个，它会关闭所有其他打开的下拉菜单，就像我想要的那样。

我的问题是我的页眉右侧有一个箭头，使用 awesome 字体将其拉入。

这是我的 Jquery:

 $('.faq_page').find('.faq_header').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      $(this).find('.faq_control i').toggleClass('fa-caret-down fa-caret-up');
      

      //Hide the other panels
      $(".faq_body").not($(this).next()).slideUp('fast');

    });

.width_container:after,
.width_container_small:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.width_container,
.width_container_small { display: block; }
/* start commented backslash hack \*/
* html .width_container,
* html .width_container_small { height: 1%; }
.width_container,
.width_container_small { display: block; }
/* close commented backslash hack */

/********** FAQ Page **********/

.faq_page {
 margin: 80px 0 80px;
}

.faq_box {
 -webkit-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
-ms-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
-o-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);

 margin-bottom: 40px;
}

.faq_header {
 background: #231f20;
 padding: 20px 0;
}

.faq_title {
 float: left;
 width: 95%;
}

.faq_title h2 {
 color: #fff;
 margin: 0;
 font-size: 22px;
 font-weight: 300;
 text-align: left;
 font-family: 'Open Sans', sans-serif;
 padding-left: 20px;
}

.faq_control {
 float: right;
 width: 5%;
}

.faq_control i {
 color: #fff;
 font-size: 40px;
 line-height: 40px;

}

.faq_body {
 background: #e8e8e8;
 padding: 20px;
 display: none;
}

.faq_active {
 display: block;
}

.faq_body p {
 margin: 0;
 font-size: 16px;
 line-height: 36px;
 letter-spacing: 2px;
 font-weight: 400;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="faq_page">
  <div class="width_container_small">

   <div class="faq_box">
    <div class="faq_header">
     <div class="width_container">
      <div class="faq_title">
       <h2>This is a Frequently Aksed Question?</h2>
      </div>
      <div class="faq_control">
       <i class="fa fa-caret-up" aria-hidden="true"></i>
      </div>
     </div>
    </div>
    <div class="faq_body faq_active">
     <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
    </div>
   </div>

   <div class="faq_box">
    <div class="faq_header">
     <div class="width_container">
      <div class="faq_title">
       <h2>This is a Frequently Aksed Question?</h2>
      </div>
      <div class="faq_control">
       <i class="fa fa-caret-down" aria-hidden="true"></i>

      </div>
     </div>
    </div>
    <div class="faq_body">
     <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
    </div>
   </div>

   <div class="faq_box">
    <div class="faq_header">
     <div class="width_container">
      <div class="faq_title">
       <h2>This is a Frequently Aksed Question?</h2>
      </div>
      <div class="faq_control">
       <i class="fa fa-caret-down" aria-hidden="true"></i>
      </div>
     </div>
    </div>
    <div class="faq_body">
     <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
    </div>
   </div>

  </div>
 </section>

单击单个框时，它会按应有的方式切换我的箭头 class。内容可见时向上，不可见时向下。但是，如果我打开一个框，然后单击下一个框将其打开，第一个框将关闭但箭头不会改变，因为它的框未被单击。

这导致框被脚本关闭（不是通过直接点击它）与箭头方向不一致。

如果盒子打开，我希望箭头指向上方，如果盒子关闭，箭头指向下方。我猜不确定如何使 class 名称取决于该框是否可见。我尝试过的一些事情使这项工作有效，但仅适用于我单击的框。

Answer 1

我已经稍微更新了您的 js，并将手风琴切换功能拆分为 jQuery 函数。这里的想法是将实际执行切换的代码从事件中分离出来，这样我们就可以在没有直接点击交互的情况下操作手风琴。

在点击处理程序中，我正在调用切换函数，然后找到所有其他打开的手风琴（由'.faq_body:visible'表示）并对它们调用切换函数，这将关闭它们并保持正确的图标。

$('.faq_page').find('.faq_header').click(function(){
      $(this).toggleAccordion();

      //Hide the other panels
      //:visible finds all open panels, .prev finds their headers, 
      //.not ensures we aren't closing the one we just opened
      $(".faq_body:visible").prev('.faq_header').not($(this)).toggleAccordion();
    });

$.fn.toggleAccordion = function() {
  //Expand or collapse this panel
  $(this).next().slideToggle('fast');

  $(this).find('.faq_control i').toggleClass('fa-caret-down fa-caret-up');
}

.width_container:after,
.width_container_small:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.width_container,
.width_container_small { display: block; }
/* start commented backslash hack \*/
* html .width_container,
* html .width_container_small { height: 1%; }
.width_container,
.width_container_small { display: block; }
/* close commented backslash hack */

/********** FAQ Page **********/

.faq_page {
 margin: 80px 0 80px;
}

.faq_box {
 -webkit-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
-ms-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
-o-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);

 margin-bottom: 40px;
}

.faq_header {
 background: #231f20;
 padding: 20px 0;
}

.faq_title {
 float: left;
 width: 95%;
}

.faq_title h2 {
 color: #fff;
 margin: 0;
 font-size: 22px;
 font-weight: 300;
 text-align: left;
 font-family: 'Open Sans', sans-serif;
 padding-left: 20px;
}

.faq_control {
 float: right;
 width: 5%;
}

.faq_control i {
 color: #fff;
 font-size: 40px;
 line-height: 40px;

}

.faq_body {
 background: #e8e8e8;
 padding: 20px;
 display: none;
}

.faq_active {
 display: block;
}

.faq_body p {
 margin: 0;
 font-size: 16px;
 line-height: 36px;
 letter-spacing: 2px;
 font-weight: 400;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="faq_page">
  <div class="width_container_small">

   <div class="faq_box">
    <div class="faq_header">
     <div class="width_container">
      <div class="faq_title">
       <h2>This is a Frequently Aksed Question?</h2>
      </div>
      <div class="faq_control">
       <i class="fa fa-caret-up" aria-hidden="true"></i>
      </div>
     </div>
    </div>
    <div class="faq_body faq_active">
     <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
    </div>
   </div>

   <div class="faq_box">
    <div class="faq_header">
     <div class="width_container">
      <div class="faq_title">
       <h2>This is a Frequently Aksed Question?</h2>
      </div>
      <div class="faq_control">
       <i class="fa fa-caret-down" aria-hidden="true"></i>

      </div>
     </div>
    </div>
    <div class="faq_body">
     <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
    </div>
   </div>

   <div class="faq_box">
    <div class="faq_header">
     <div class="width_container">
      <div class="faq_title">
       <h2>This is a Frequently Aksed Question?</h2>
      </div>
      <div class="faq_control">
       <i class="fa fa-caret-down" aria-hidden="true"></i>
      </div>
     </div>
    </div>
    <div class="faq_body">
     <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
    </div>
   </div>

  </div>
 </section>

Answer 2

我的提案基于：

获取当前"faq_box"
得到剩余的"faq_box"
隐藏其他常见问题框并设置正确的 fa-caret-down
对于当前 "faq_box" 切换可见性和 fa-caret

$(function () {
  $('.faq_page').find('.faq_header').on('click', function(e) {
    var currFaqBox = $(this).closest('.faq_box');
    var otherFaqBox = currFaqBox.siblings().not(currFaqBox);

    // hide the other faq box
    otherFaqBox.find('.faq_body').slideUp('fast');
    otherFaqBox.find('.faq_control i').addClass('fa-caret-down').removeClass('fa-caret-up');

    // toggle current faq box
    currFaqBox.find('.faq_body').slideToggle('fast');
    currFaqBox.find('.faq_control i').toggleClass('fa-caret-down fa-caret-up');
  });
});

.width_container:after,
.width_container_small:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.width_container,
.width_container_small { display: block; }
/* start commented backslash hack \*/
* html .width_container,
* html .width_container_small { height: 1%; }
.width_container,
.width_container_small { display: block; }
/* close commented backslash hack */

/********** FAQ Page **********/

.faq_page {
  margin: 80px 0 80px;
}

.faq_box {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
  box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
  -ms-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
  -o-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);

  margin-bottom: 40px;
}

.faq_header {
  background: #231f20;
  padding: 20px 0;
}

.faq_title {
  float: left;
  width: 95%;
}

.faq_title h2 {
  color: #fff;
  margin: 0;
  font-size: 22px;
  font-weight: 300;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  padding-left: 20px;
}

.faq_control {
  float: right;
  width: 5%;
}

.faq_control i {
  color: #fff;
  font-size: 40px;
  line-height: 40px;

}

.faq_body {
  background: #e8e8e8;
  padding: 20px;
  display: none;
}

.faq_active {
  display: block;
}

.faq_body p {
  margin: 0;
  font-size: 16px;
  line-height: 36px;
  letter-spacing: 2px;
  font-weight: 400;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="faq_page">
    <div class="width_container_small">

        <div class="faq_box">
            <div class="faq_header">
                <div class="width_container">
                    <div class="faq_title">
                        <h2>This is a Frequently Aksed Question?</h2>
                    </div>
                    <div class="faq_control">
                        <i class="fa fa-caret-up" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            <div class="faq_body faq_active">
                <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
            </div>
        </div>

        <div class="faq_box">
            <div class="faq_header">
                <div class="width_container">
                    <div class="faq_title">
                        <h2>This is a Frequently Aksed Question?</h2>
                    </div>
                    <div class="faq_control">
                        <i class="fa fa-caret-down" aria-hidden="true"></i>

                    </div>
                </div>
            </div>
            <div class="faq_body">
                <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
            </div>
        </div>

        <div class="faq_box">
            <div class="faq_header">
                <div class="width_container">
                    <div class="faq_title">
                        <h2>This is a Frequently Aksed Question?</h2>
                    </div>
                    <div class="faq_control">
                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            <div class="faq_body">
                <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
            </div>
        </div>

    </div>
</section>

根据手风琴可见性切换 class

toggle class based on accordion visibility

jquery

this

accordion

toggleclass