需要一点帮助 . 还是jQuery的初学者......我有一个产品包比较表 . 第一列包含功能 . 如果我单击它打开的函数并以手风琴样式显示函数的描述,并使函数名称为粗体(将类'active'添加为活动的折叠 Headers ) . 默认情况下,所有手风琴都会关闭 . 我只想要同时打开一个手风琴,所以如果访问者点击另一个,前一个手风琴会自动关闭 . 我做了这个工作 . 当我再次单击Accordion头来关闭它时会出现问题,因为它会立即再次打开,但它会删除活动类 . 如何关闭1个手风琴而不是立即再次打开(考虑if语句,但不确定如何使其工作......)?
这是html:
<tr>
<td><div class="accordion"><h4><a href="javascript:(void)">Accordion head</a></h4><div class="module-desc">Service description</div></div></td>
<td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
<td><img src="assets_wm/images/simeimg.png" alt="pipa" /></td>
<td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
</tr>
<tr>
<td><div class="accordion"><h4><a href="javascript:(void)">Accordion head</a></h4><div class="module-desc">Service description</div></div></td>
<td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
<td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
<td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
</tr>
<tr>
<td><div class="accordion"><h4><a href="javascript:(void)">Accordion head</a></h4><div class="module-desc">Service description</div></div></td>
<td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
<td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
<td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
</tr>
这是jQuery代码:
$(document).ready(function(){
$(".module-desc").hide();
$(".accordion h4").click(function(){
$(".accordion").find(".module-desc").hide("fast");
var thisBlock = $(this).parent().index('.accordion');
$(".accordion").find(".active").not($(this)).removeClass("active");
$(this).toggleClass("active").next().slideToggle("fast");
$(this).parent().toggleClass("activeToggle").siblings()
.removeClass("activeToggle").children(".module-desc").hide("fast");
return false;
});
});
JsFiddle链接:http://jsfiddle.net/5QT6A/只应隐藏服务描述 . 即使在手风琴关闭后,图像也需要保持可见 .
1 回答
刚刚意识到这比我以前的答案更简单 . 首先切换单击的项目活动类,然后对下一个项目(内容)执行幻灯片切换 . 然后,对于其他不是单击项目的其他内容,删除活动类并向上滑动下一个项目(内容) .
示例:jsfiddle