关闭切换其他打开的Div

时间:2012-03-22 01:44:48

标签: jquery jquery-ui toggle

全部, 我有以下代码打开一些充当Toggles的div:

$(".tb-toggle").each(function(){
    $(this).find(".box").hide();
});

$(".tb-toggle").each(function(){
     $(this).find(".trigger").click(function() {
            $(this).toggleClass("active").next().stop(true, true).slideToggle("slow");
            return false;
     });
});

这是我的HTML显示Toggles:

<div class="tb-toggle toggle-fancy"><a href="#" class="trigger"><span>+</span>Toggle Accordion</a><div class="box">This is fancy toggle accordion</div><!-- .box (end) --></div>
<div class="tb-toggle toggle-fancy"><a href="#" class="trigger"><span>+</span>Toggle Accordion 2</a><div class="box">This is fancy toggle accordion 2</div><!-- .box (end) --></div>
<div class="tb-toggle toggle-fancy"><a href="#" class="trigger"><span>+</span>Toggle Accordion 3</a><div class="box">This is fancy toggle accordion 3</div><!-- .box (end) --></div>

这很好用,打开我的Toggle罚款。但是,当发生这种情况时,我想关闭其他打开的Toggles。

我在jQuery http://jqueryui.com/demos/accordion/上找到了这个,所以我尝试将代码调整为:

$(".tb-toggle").each(function(){
     $(this).find(".trigger").click(function() {
            $(this).toggleClass("active").next().stop(true, true).slideToggle("slow");
            return false;
     });
}).next().hide();

这不起作用。我想我可能不得不删除其他的活动切换类,但不知道如何做到这一点。

我也试过这段代码:

$(".tb-toggle").each(function(){
     $(this).find(".trigger").click(function() {
            $(this).toggleClass("active").next().stop(true, true).slideToggle("slow");
            return false;
     });
}).next().toggleClass("active");

有人能指出我正确的方向吗?

这是一个更新的JSFiddle:http://jsfiddle.net/HHtBX/

谢谢!

1 个答案:

答案 0 :(得分:1)

FIXED :)针对具体案例的jsfiddle后更新工作演示:http://jsfiddle.net/HHtBX/2/

JQuery代码

$(".tb-toggle").each(function(){
    $(this).find(".box").hide();
});

$(".tb-toggle").each(function(){
    $(this).find(".trigger").click(function() {
        $('.tb-toggle a').removeClass('active').next().slideUp('slow');
        $(this).toggleClass("active").next().stop(true, true).slideToggle("slow");
        //return false;
    });
});

以前没有提供过Jsfiddle的版本

Hiya Okies这可能会对您有所帮助:http://jsfiddle.net/tovic/CzE3q/

工作演示:(有点结构化)http://jsfiddle.net/CzE3q/21/ - 由于你没有jsfiddle,我会假设你的HTML很好并试试这个

希望这有帮助,欢呼!