jQuery：菜单出现/消失点击

我一直在寻找所有的网络，我找不到解决方案。我对jQuery也很陌生。jQuery：菜单出现/消失点击

我的情况：

我有一个导航栏，在它的各个环节激活/触发megamenu（每个环节都有自己的megamenu）。

我需要：

我需要一种方法来让每个链接激活自己的megamenu，该megamenu应该关闭时：

在导航栏的另一个项目的用户点击。
用户在导航栏中单击相同的项目。
用户单击megamenu内部的“关闭按钮”（X）图形（为简单起见，未在HTML中显示）。

HTML：

<div id="top-nav"> 
<ul> 
    <li><span>Products &amp; Services</span> 
    <ul> 
     <li><div class="megamenu">Content here...</div></li> 
    </ul> 
    </li> 
    <li><span>Support &amp; Training</span> 
    <ul> 
    <li> <div class="megamenu">Content here...</div></li> 
    </ul> 
    </li> 
    <li><span>Communities</span> 
    <ul> 
    <li> <div class="megamenu">Content here...</div></li> 
    </ul> 
    </li> 
    <li><span>Store</span> 
    <ul> 
     <li><div class="megamenu">Content here...</div></li> 
    </ul> 
    </li> 
</ul> 
</div>

我见过的“性感的下拉菜单”，但问题的剧本，它通过关闭悬停点击触发的菜单，和我说，我是jQuery的新手，我无法找到一种适应我需要的方式。

http://www.sohtanaka.com/web-design/examples/drop-down-menu/

任何帮助将不胜感激。

谢谢。

来源

2010-11-15 Ricardo Zea

你会附加一个单击处理程序到另一个项目/同一项目/关闭按钮，它会读这样的事情：

$(function(){ 
    $('#top-nav span').click(function(){ 
     divTrigger = $('#top-nav span').index(this); 
     thisMegaMenu = $('.megamenu:eq('+divTrigger+')'); 
     $('.megamenu').slideUp(200); 
     if(thisMegaMenu.is(":not(':visible')")){ 
     thisMegaMenu.slideDown(200); 
     } 
}); 
    $('.megamenu').append("<a href=# id=closeButton>x</a>"); 
    $('#closeButton').live('click',function(){ 
     thisMegaMenu.slideUp(200); 
    }); 
});

Try it out here

来源

2010-11-16 17:10:35 bozdoz

bozdoz，您的解决方案完美无缺。如果我想追加脚本内的关闭按钮，我并不是所有的方法，但这绝对是解决我需要的每一件事情的脚本。非常感谢！ – 2010-11-16 17:26:58

谢谢里卡多。我第一个接受的答案。我放了关闭按钮，只是为了好玩。 :) – bozdoz 2010-11-16 17:28:39

对于Navbar中的每个更高层次<li> s，给他们一个类似'navbar'的类。然后你的jQuery可能看起来像这样：

$('li .navbar').click(function() { 
    if($(this).find('.megamenu').is(':visible')) { // Already open 
    $(this).find('.megamenu').hide(); 
    } else { // Close others first 
    $('.megamenu').each(function() { 
     $(this).hide(); 
    }); 
    $(this).find('.megamenu').show(); 
    } 
});

你只需要添加关闭按钮的点击处理程序。请注意，这是未经测试的代码，请告诉我是否有问题。

来源

2010-11-16 17:00:53

感谢您的回复亚伦。但是，我的代码检查员告诉我这里有一个语法错误：$（this）.find（'。megamenu'）。show（）; - 虽然我不是jQuery/JS专家，但我没有看到那一行中有什么错误......是吗？无论如何，我尝试了您的代码，但不，它不起作用。我确实找到了解决办法，请参阅下面的答案。再次感谢。 – 2010-11-16 17:19:09

噢，我的错误，我忘了关闭每行中的.each函数。查看帖子进行编辑。 – 2010-11-16 17:25:12

现在的代码很好，但仍然无法正常工作，不知道为什么......非常感谢您的时间和帮助。 – 2010-11-16 17:33:09

我能得到它的工作原理就像一个这样的其它解决方案魅力以及：

$(function(){ 
//Megamenus 
$('#top-nav li').click(function(){//set up a click event for the li 
    $(this).siblings('.active').click();//click any other lis which are active to close their menus 
    $(this).find('.megamenu').toggle();//toggle the child megamenu 
    $(this).toggleClass('active');//toggle a class so we can identify any open megamenus 
}); 

$('.megamenu').click(function(event){//hide the megamenu on load and set up a click event.. 
    $(this).parents('li').click();//..that just clicks the parent li 
    event.stopPropagation();//stop the click bubbling up to the parent li 
    }); 
});

我现在的问题是哪种解决方案更好用？这是一个很好的问题，虽然现在：P

在提供解决方案：http://codingforums.com/showpost.php?p=1016305&postcount=2

来源

2010-11-16 17:25:21

jQuery：菜单出现/消失点击

回答

相关问题