gpt4 book ai didi

javascript - 只有第一个常见问题解答元素在单击时展开 - jquery

转载 作者:行者123 更新时间:2023-11-28 21:00:07 25 4
gpt4 key购买 nike

我正在尝试创建常见问题解答列表。第一次单击时答案显示良好,但我希望能够单击另一个问题并展开该答案并关闭另一个答案。这是 JavaScript:

$(document).ready(function() {
// hide all the answers
$('.faq li div').hide();
$('.faq li').click(function(){
var question = $(this);
var answer = $(this).find('div');
// if the faq isn't active
if(!$('.faq li').hasClass('active')) {
answer.slideDown();
$(this).siblings('div').slideUp();
question.addClass('active');
}
else {
answer.slideUp();
question.removeClass('active');
}

});



});

CSS:

ul.faq {
list-style:none;
cursor:pointer;
z-index:1;

}

ul.faq li h3 {
background:#0A5C75 url(../images/faq-inactive.png) right no-repeat;
color:#fff;
padding:20px 50px 20px 10px;
margin-bottom:10px;
border:1px solid #fff;
}
ul.faq li.active h3 {
background:#0A5C75 url(../images/faq-active.png) right no-repeat;

}
ul.faq li div {
background:#FFFFFF;
margin:0px 10px 10px 10px;
padding:20px;
overflow:hidden;
/* added fixed width to stop the jerkyness*/
width:522px;
position:relative;
top:-10px;
box-shadow: inset 0px 4px 4px 0px rgba(63, 70, 76, 0.15), 0px 4px 4px rgba(63, 70, 76, 0.15);
}

和 HTML

<ul class="faq">
<li>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?</a></h3>
<div>Vivamus rutrum arcu sit amet dolor pulvinar dictum. Etiam porttitor leo eget velit volutpat quis ultricies urna ornare. Quisque ac ultrices est. Ut lobortis malesuada justo, sed blandit sapien bibendum et. Donec vel ante eu orci pellentesque dictum. Phasellus molestie egestas du</div>
</li>
<li>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?</a></h3>
<div>This is the answer to question 2</div></li>
<li>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?</a></h3>
<div>This is the answer to question 3</div>
</li>
</ul>

最佳答案

我认为我可以对您的代码进行一些改进并产生行为,并且还可以稍微缩短代码。

注意,我跳过了使用您的事件类,以展示如何实现它。

Here's a tinker.io for demo我在 FF13 和 Chrome 中测试了它

$('.faq li div').hide();
$('.faq li').click(function(event) {

var clickedQuestion = event.target;
var answer = $(clickedQuestion).siblings('div');

if($('ul.faq').find('div').is(':visible')){
$('ul.faq').find('div').slideUp();
}
answer.slideDown();

});

关于javascript - 只有第一个常见问题解答元素在单击时展开 - jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11261211/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com