Question

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

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

我的问题是我的标题右侧有一个箭头，使用字体很棒。

这是我的Jquery：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

单击一个框时，它会切换我应该的箭头类。当内容可见时向上，向下看不到。但是，如果我打开一个方框，然后点击下一个方框打开它，第一个方框将关闭，但箭头不会改变，因为它的方框没有被点击。

这会导致框被脚本关闭（而不是直接点击它），使其与箭头方向不一致。

我希望箭头指向盒子是否打开和关闭，如果盒子关闭，期间。不知道如何使类名依赖于盒子是否可见我猜。我尝试过的一些东西使这个工作，但只有我点击的框。

Answer 1

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

在点击处理程序中，我调用了切换功能，然后找到所有其他打开的手风琴（用＆＃39; .faq_body：visible＆＃39;表示）并调用它们上的切换功能，将关闭它们并保持正确的图标。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: