我有一支手风琴......
dd
部分展开。我有以下示例,我无法工作......
的jQuery
$(".accordion > dt > a").click(function () {
$(".accordion a").removeClass('active');
if ($('.accordion > dd').next().is(':visible')) {
$(this).removeClass('active');
$('.accordion > dd').slideUp(200);
} else {
$(this).addClass('active');
$(this).parent().next().slideDown();
}
});
答案 0 :(得分:1)
像 this
之类的东西$(".accordion > dt > a").click(function () {
$(".accordion a").removeClass('active');
$(this).addClass('active');
$('.accordion > dd').not($(this)).slideUp(200);
$(this).parent().next('dd').slideDown(200)
});
您可以忽略此
中的.not
部分
$('.accordion > dd').not($(this)).slideUp(200);
答案 1 :(得分:0)
$("dt").click(function () {
$('dd').slideUp();
$(this).next('dd').slideDown();
});
答案 2 :(得分:0)
试试这段代码:
$(".accordion > dt > a").click(function () {
var $myDD = $(this).parent().next();
$(".accordion a").removeClass('active');
$(this).addClass('active');
$('dd').slideUp();
if ($myDD.is(':visible'))
$myDD.slideUp();
else
$myDD.stop().slideDown();
});

.about-us .accordion {
padding: 0 1.6em;
max-width: 970px;
margin: 0 auto 50px auto;
}
.about-us .accordion dt {
margin: 0 0 5px 0;
}
.about-us .accordion dt a {
background:#EDEFEF no-repeat scroll right 0px !important;
color: #4e5663;
display: block;
text-transform: uppercase;
padding: 20px;
text-decoration: none;
font-weight: 500;
font-size: 16px;
}
.about-us .accordion dd {
display: none;
padding: 20px;
margin: -7px 0 5px 0;
border: 2px solid #00b0e4;
}
body.about-us .accordion a.active {
background:#00B0E4 no-repeat scroll right -67px!important;
color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="about-us">
<dl class="accordion"> <dt>
<a href="#title">Title</a>
</dt>
<dd style="">
<p>lorem upsum dolor sit amet</p>
</dd> <dt>
<a href="#title">Title</a>
</dt>
<dd style="">
<p>lorem upsum dolor sit amet</p>
</dd> <dt>
<a href="#title">Title</a>
</dt>
<dd style="">
<p>lorem upsum dolor sit amet</p>
</dd> <dt>
<a href="#title">Title</a>
</dt>
<dd style="">
<p>lorem upsum dolor sit amet</p>
</dd> <dt>
<a href="#title">Title</a>
</dt>
<dd style="">
<p>lorem upsum dolor sit amet</p>
</dd>
</dl>
</div>
&#13;
答案 3 :(得分:0)
已经有很多答案。但是你可以在这个问题上尝试这个代码 http://jsfiddle.net/m0zehxpc/2/
var datapanel = $('.accordion > dd').hide();
$('.accordion > dt > a').click(function() {
datapanel.slideUp(200);
$(this).parent().next().slideDown();
return false;
});
答案 4 :(得分:0)
我在你的代码中修改了一些东西,现在它的工作方式与任何其他标准手风琴一样。
JS代码:
$(".accordion > dt > a").click(function () {
var $this = $(this);
var content = $this.parent().next();
if (!$this.hasClass('active')) {
$(".accordion a").removeClass('active');
$('.accordion > dd').slideUp(200);
$this.addClass('active');
content.slideDown();
} else {
$this.removeClass('active');
content.slideUp(200);
}
});
现场演示@ JSfiddle:
http://jsfiddle.net/dreamweiver/m0zehxpc/12/
快乐编码:)