1

需要一点帮助。还是 jQuery 的初学者...我有一个产品包比较表。第一列包含函数。如果我单击一个函数，它会打开并以手风琴样式显示该函数的描述，并将函数名称加粗（添加类“活动”）作为活动的手风琴标题。默认情况下，所有手风琴都是关闭的。我只想同时打开 1 个手风琴，所以如果访问者点击另一个手风琴，前一个手风琴会自动关闭。我做了这个工作。当我再次单击 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/ 只有服务描述应该被隐藏。即使在手风琴关闭后，图像也需要保持可见。

4

1 回答 1

0

刚刚意识到有一种比我以前的答案更简单的方法。首先切换单击的项目活动类并在下一个项目（内容）上进行滑动切换。然后对于不是单击项目的所有其他内容，删除活动类并向上滑动下一个项目（内容）。

$(document).ready(function(){
    $(".module-desc").hide();
    $(".accordion h4").click(function(){
        $(this).toggleClass("active").next().slideToggle("fast");
        $(".accordion h4").not($(this)).removeClass("active").next().slideUp("fast");
        return false;
    });
});

示例：jsfiddle

于 2012-09-02T10:43:05.593 回答