我的 jQuery 和 CSS 点击切换菜单表现得很奇怪

Posted 2023-02-16

【中文标题】我的 jQuery 和 CSS 点击切换菜单表现得很奇怪

【英文标题】：My jQuery and CSS click-to-toggle menu is acting weird

【发布时间】：2012-10-21 07:27:18

【问题描述】：

我在 jQuery 中的弹出菜单遇到了各种奇怪和古怪的问题。

该菜单应该位于窗口底部的工具栏上，并在单击时弹出（但在悬停时不会弹出）。 然后它应该在以下情况下再次隐藏： a) 单击菜单项， b) 再次单击打开它的工具栏按钮， c) 或单击其他任何内容时。

起初这似乎工作得很好，但它已经开始恶化。现在，我只剩下一个小故障......

会发生什么：

我正在加载页面 我单击第一个菜单按钮。它会按应有的方式弹出菜单。 我单击了第二个菜单按钮。它会弹出，而我打开的另一个会弹出。 让第二个打开，我再次单击第一个。啊！第二个保持开放！现在它们都同时营业了！？？ 现在我单击页面中的某些内容以使它们消失。只有第一个菜单消失了！第二个徘徊。要让 IT 消失，我必须点击它的菜单按钮。

请帮忙！！！ 这是我的 jsFiddle：

http://jsfiddle.net/xn4TN/31/

这是我的 javascript：

    var togglemenu = null;
    function fn_togglemenu(datatarget) 
        $('.bottom-menu-bg ul li ul[data-target="' + datatarget + '"]').slideToggle(function() 
            togglemenu = $(this).is(':visible') ? datatarget : null;
            $('.bottom-menu-bg ul li ul[data-target="' + datatarget + '"]').parent('li a').toggleClass('hover');
        );
    
    $(document).ready(function() 
        $('.bottom-menu-bg ul li a').click(function(ev)
            ev.preventDefault();
            fn_togglemenu($(this).attr('data-target'));
        );
        $(document).click(function(ev)
            if(togglemenu != null) 
                fn_togglemenu(togglemenu);
            
        );
    );

实际包含内联的代码太多。

【问题讨论】：

请考虑缩进您的代码（这样其他人可以阅读它并查看结构）。

对缩进感到抱歉 - 我正试图将它放入这个网站（我不太了解！）它以缩进开头：P

还添加了jsFiddle：jsfiddle.net/xn4TN/31

【参考方案1】：

Toggle 并未在此处隐藏其他菜单，因此最好明确说明。试试这个：

function fn_togglemenu(datatarget) 
    // hide menus
    $('.bottom-menu-bg ul li ul').hide();
    $('.bottom-menu-bg ul li').removeClass('hover');
    // show target menu
    $('ul[data-target="' + datatarget + '"]').slideToggle(function() 
        $('ul[data-target="' + datatarget + '"]')
            .parent('li a').addClass('hover');
    );
 

$(document).ready(function() 
    $('.bottom-menu-bg ul li a').click(function(ev) 
        ev.preventDefault();
        ev.stopPropagation();
        fn_togglemenu($(this).attr('data-target'));
    );

    $(document).click(function(ev) 
        // explicitly hide menus
        $('.bottom-menu-bg ul li ul').hide();
    );
);

​

注意：也停止了链接点击处理程序的传播。

这是您更新的 jsfiddle：http://jsfiddle.net/benedict_w/hzHKD/

【讨论】：

抱歉，出现语法错误 - 我在此处更新了代码和链接：jsfiddle.net/benedict_w/hzHKD - 让我知道它是否有效。

非常感谢！这解决了它！