首页 文章

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

提问于
浏览 次
4

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

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

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

这是我的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>

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

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

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

jquery this accordion toggleclass

2 回答

  • 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>
    回复于
  • 1

    我的提议基于：

    • 获取当前"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>
    回复于

相关问题