Question

请检查此链接http://ervaarelburg.nl/index1.html

我在子菜单中有问题，这是子菜单http://pastebin.com/MrJPDvct

的JS

所以我希望当我点击菜单链接，子菜单打开，并通过点击其他任何地方，子菜单消失。问题是当我打开它时，它会因为这段代码而自动消失

$('html,body').click(function(event) {
     if(event.target.id == 'flip' || event.target.id == 'panel0' || event.target.id == 'panel1' || event.target.id == 'panel2' || event.target.id == 'panel3' || event.target.id == 'panel4' || event.target.id == 'panel5' || event.target.id == 'panel6'){
         $(".submenu").fadeIn("slow");
     }else{
         $(".submenu").fadeOut("slow");
     }
  });

与此类似，http://ervaarelburg.nl/
但我想修改index1.html的代码，那么请你帮忙吗？

先谢谢

Answer 1

使用更多指定的选择器会更容易，然后在if / else子句中多次检查event.target。尝试这样的事情：

    var isOpen = false;

// Clicking on the actual anchors shows in the submenu
$('#flip > ul li > a' ).on( 'click', function( e ) {
    e.preventDefault();
    $(".submenu").fadeIn( "slow", function() { isOpen = true; } );
});

$( document ).on( 'click', function( e ) {
    // If you clicked in the document, as long as you didn't click one of the
    // triggers, then close the menu.
    if( isOpen && ( $.inArray( e.target, $('#flip > ul > li > a' ) ) === -1 ) ) {
        $(".submenu").fadeOut("slow", function() { isOpen = false; } );
    }

});

JsFiddle：http://jsfiddle.net/grammar/qEfbT/

希望这有帮助

Answer 2

工作DEMO

试试这个

为每个event.stopPropagation();点击

添加.item

并在元素外点击淡出添加此

$('html').click(function() {
for(var i=6;i<=10;i++){ 
       $("#panel"+i).fadeOut("slow"); 
    }
    for(var i=0;i<=4;i++){ 
       $("#panel"+i).fadeOut("slow"); 
    }
});

希望这有帮助，谢谢

子菜单定制的jquery

2 个答案:

工作DEMO