根据手风琴的可见性切换类

Question

我真的不认为这应该很难，但我已经花了几个小时在上面，并搜索了Stack，这帮助了我到达这个点，但并没有完全到达我需要的地方。

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

我的问题是，我在标题右侧有一个箭头，它是使用font 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>

当单击一个框时，它会像应该的那样切换我的箭头类。当内容可见时向上，当不可见时向下。 但是，如果我打开了一个框，并单击下一个框来打开它，第一个框将关闭，但箭头不会改变，因为它的框没有被单击。

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

我希望如果框处于打开状态，则箭头指向上，如果框处于关闭状态，则指向下，无论如何。 不确定如何使类名依赖于框是否可见。我尝试过几件事情，但只对我正在单击的框起作用。

- JSum

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>

- Tyler Burki

Answer 2

我的提议基于以下内容：

• 获取当前的“faq_box”
• 获取剩余的“faq_box”
• 隐藏其他的faq框并设置正确的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>

- gaetanoM