4
これはこれほど難しいとは思えませんが、私は数時間作業していて、この点まで私を連れてきました。私はどこにいなければならない。アコーディオンの可視性に基づいたトグルクラス
FAQページにはアコーディオンがあります。この部分は動作します。私が1つを開くと、他の開いているドロップダウンが閉じられます。
私の問題は、私のヘッダーの右側に、素晴らしいフォントを使用して引っ張っている矢印があることです。
は、ここに私の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 {
\t margin: 80px 0 80px;
}
.faq_box {
\t -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);
\t margin-bottom: 40px;
}
.faq_header {
\t background: #231f20;
\t padding: 20px 0;
}
.faq_title {
\t float: left;
\t width: 95%;
}
.faq_title h2 {
\t color: #fff;
\t margin: 0;
\t font-size: 22px;
\t font-weight: 300;
\t text-align: left;
\t font-family: 'Open Sans', sans-serif;
\t padding-left: 20px;
}
.faq_control {
\t float: right;
\t width: 5%;
}
.faq_control i {
\t color: #fff;
\t font-size: 40px;
\t line-height: 40px;
}
.faq_body {
\t background: #e8e8e8;
\t padding: 20px;
\t display: none;
}
.faq_active {
\t display: block;
}
.faq_body p {
\t margin: 0;
\t font-size: 16px;
\t line-height: 36px;
\t letter-spacing: 2px;
\t 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">
\t \t <div class="width_container_small">
\t \t \t <div class="faq_box">
\t \t \t \t <div class="faq_header">
\t \t \t \t \t <div class="width_container">
\t \t \t \t \t \t <div class="faq_title">
\t \t \t \t \t \t \t <h2>This is a Frequently Aksed Question?</h2>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="faq_control">
\t \t \t \t \t \t \t <i class="fa fa-caret-up" aria-hidden="true"></i>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="faq_body faq_active">
\t \t \t \t \t <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>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="faq_box">
\t \t \t \t <div class="faq_header">
\t \t \t \t \t <div class="width_container">
\t \t \t \t \t \t <div class="faq_title">
\t \t \t \t \t \t \t <h2>This is a Frequently Aksed Question?</h2>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="faq_control">
\t \t \t \t \t \t \t <i class="fa fa-caret-down" aria-hidden="true"></i>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="faq_body">
\t \t \t \t \t <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>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="faq_box">
\t \t \t \t <div class="faq_header">
\t \t \t \t \t <div class="width_container">
\t \t \t \t \t \t <div class="faq_title">
\t \t \t \t \t \t \t <h2>This is a Frequently Aksed Question?</h2>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="faq_control">
\t \t \t \t \t \t \t <i class="fa fa-caret-down" aria-hidden="true"></i>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="faq_body">
\t \t \t \t \t <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>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </section>それはそれが必要のように私の矢印クラスを切り替えることができます単一のボックスをクリックします。コンテンツが表示されているときは上、下が表示されていないときは下が表示されます。しかし、1つのボックスを開いて次のボックスをクリックすると、最初のボックスは閉じられますが、そのボックスはクリックされていないため、矢印は変更されません。
この結果、ボックスはスクリプトによって閉じられます（直接クリックせずに）、矢印の方向に並んでいません。
ボックスが開いている場合は矢印をポイントし、ボックスが閉じている場合はピリオドをピリオドにしたいと思います。クラス名がボックスが可視かどうかに依存するようにする方法はわかりません。私が試したいくつかのことが、この作品を作りましたが、私がクリックしていたボックスのためだけでした。
おかげで、これは本当によく働きます。 – JSum