如何切换 div 并模拟隐藏以前切换的 div？答案

【问题标题】：How can I toggle a div and simulateously hide previously toggled divs?如何切换 div 并模拟隐藏以前切换的 div？
【发布时间】：2011-12-16 19:09:16
【问题描述】：

当我单击任何菜单项时，会显示该项目的子菜单。这是伟大的。然后，当我单击任何其他菜单项时，第一个框/子菜单消失并出现一个新的子菜单，这也很棒。问题是剩余/最后一个子菜单不会消失。我希望能够单击任何菜单项并隐藏剩余/最后一个子菜单。

我的网址：http://arabic001.com

$(document).ready(function() {

       $('.menu').click(function()  {

       $('.subNav').hide();
          $(this).next().toggle('slow');


        });

        })

【问题讨论】：

这里不太关注你。您想要的是：menu.click()，但您还想要：menu.click()。你不能两者兼得。也许你想要这个：menu.click()。那是你要的吗？这是可行的，但这意味着用户必须单击两次才能从一个子菜单切换到另一个子菜单，这很难看，IMO。
我和@smendola 在一起；我不知道这里问的是什么。
你说得对，我不希望用户点击两次。

标签： javascript jquery toggle show-hide submenu

【解决方案1】：

我昨天刚做了这个......

当我切换打开的东西时，我会向元素添加一个新类，然后当切换一个新项目时，您可以使用添加的类作为选择器来关闭打开的项目。

    $("#btn_toggle_transcript").on("click",
            function(){
                closeOpen("#transcript_container");
                $("#transcript_container").slideToggle(1000);
                $("#transcript_container").addClass('ToggleOpen');
            }
    );

function closeOpen(ignore){
    if(ignore!=''){
                $(".ToggleOpen:not('"+ignore+"')").slideUp(500);
                $(".ToggleOpen:not('"+ignore+"')").removeClass('ToggleOpen');
            }else{
                $(".ToggleOpen").slideUp(500);
                $(".ToggleOpen").removeClass('ToggleOpen');
            }    }

更新：我删除了其中的“忽略”位。这是多余的。这对我很有用。我还将绑定方法更改为使用 $(selector).on("event",callback) 格式。

更新：糟糕！我确实需要在那里忽略。否则关闭动作将再次反弹打开。 :(

【讨论】：