基于手风琴可见性的切换类

Question

所以我真的不认为这应该这么难，但我已经工作了几个小时，并浏览了Stack，它帮助我达到了这一点，但不是我需要的全部方式。

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

我的问题是，我有一个箭头在我的标题的右手边，这是拉在使用字体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>

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

这将导致该框被脚本关闭(而不是通过直接点击它)，从而偏离箭头方向。

我想让箭头指向上，如果盒子是打开的，如果盒子是关闭的，就指向下，句号。不知道如何使类名取决于是否框是可见的，我猜。我尝试了一些事情，但只是为了我点击的盒子。

Answer 1

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

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

$('.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"
• 隐藏其他常见问题框并设置正确的下插入符号
• 为当前"faq_box"切换可见性和fa-插入符

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