【问题标题】:jQuery Toggle, when new menu opens, close thejQuery Toggle,当新菜单打开时,关闭
【发布时间】:2012-11-07 09:29:55
【问题描述】:

我有多个隐藏可见性的菜单(表单),我用图标上的点击事件打开它们。一切都很好,除了当我打开另一个菜单时前一个菜单仍然打开时,它们都保持可见。所以,我希望在打开新菜单时隐藏前菜单。

HTML

<span id='settingsIcon' class='settingsIcon'>S
    <div class='settingForms'>
        <div class='formMoveButton'>
            <span class='settingsMakePublicIcon'>w</span>
            <form action='' method='post' class='moveForm'>
                <input class='settingsMakePublicButton' type='submit' value='Make public        ' name='$this->move'/>
            </form>
        </div>
    </div>
</span>

jQuery

$(".settingsIcon").click(function(event) {
    event.stopPropagation();

    if($(document).find(".settingForms").is(':visible') < 1) {
        HandleSettingsWindow($($(this).children()[0]));
    } else {
    }
});

HandleSettingsWindow = function (el) {
    $(document).click(function () { // Close the menu when clicked outside it
        el.hide();
        document.oncontextmenu = function () { return true; };
    });
    el.toggle();
}

【问题讨论】:

    标签: jquery menu toggle


    【解决方案1】:

    请试试这个:http://jsfiddle.net/RttT5/

    注意if($(document).find(".settingForms").is(':visible'))

    希望休息满足您的需求:)

    代码

    $(".settingsIcon").click(function(event) {
        event.stopPropagation();
    
        if($(document).find(".settingForms").is(':visible')) {
            HandleSettingsWindow($($(this).children()[0]));
        } else {
    
        }
    });
    
    HandleSettingsWindow = function (el) {
        $(document).click(function () { // Close the menu when clicked outside it
            el.hide();
            document.oncontextmenu = function () { return true; };
        });
        el.toggle();
    }​
    

    【讨论】:

    • 我并没有真正关注你下一步该做什么,这就是我正在努力解决的问题。如果页面上有任何可见菜单,我想在打开新菜单时关闭它们。
    【解决方案2】:

    问题出在这一行

    if($(document).find(".settingForms").is(':visible') < 1)
    

    不需要

    if($(document).find(".settingForms").is(':visible'))
    

    【讨论】:

      猜你喜欢
      • 2016-07-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-05-18
      • 2015-08-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多