Question

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

Answer 1

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

$(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

手表里面的表 - 需要纠正一个错误

1 个答案: