0

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

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

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

这是发生的事情：

  1. 我加载页面
  2. 我单击第一个菜单按钮。它会按应有的方式弹出菜单。
  3. 我单击第二个菜单按钮。它弹出，我打开的另一个弹出。
  4. 让第二个打开，我再次单击第一个。啊！第二个保持开放！现在它们都同时开放了！？？
  5. 现在我单击页面中的某些内容以使它们消失。只有第一个菜单消失了！第二个徘徊。为了让 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);
            }
        });
    });

有太多代码无法实际包含内联。

4

1 回答 1

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();
    });
});

​</p>

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

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

于 2012-10-21T08:58:39.310 回答