jQuery:单击时显示/消失菜单 [英] jQuery: menus appear/disappear on click

问题描述

我一直在网上浏览，但找不到解决方案.我对jQuery也很陌生.

I've been looking all over the web and I can't find a solution. I am very new to jQuery as well.

我的案子:

我有一个导航栏，其中的每个链接都会激活/触发一个megamenu(每个链接都有自己的megamenu).

I have a nav bar, each link in it activates/triggers a megamenu (each link has its own megamenu).

我需要什么:

我需要一种使每个链接激活其自己的megamenu的方法，megamenu应该在以下情况下关闭:

I need a way to have each link activate its own megamenu, the megamenu should close when:

1. 用户单击导航栏中的另一个项目.

1. The user clicks on another item in the nav bar.

用户单击导航栏中的同一项目.

The user clicks on the same item in the nav bar.

用户单击megamenu内的关闭按钮"(X)图形(为简单起见，未在HTML中显示).

The user clicks on a 'close button' (X) graphic inside the megamenu (not shown in the HTML for simplicity sake).

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的新手，我不知道一种使其适应我需要的方式.

I've seen the script of 'Sexy Drop Down Menu' but the problem is that it closes the menu triggered by the click on hover, and as I said, I'm new to jQuery and I can't figure out a way to adapt it to what I need.

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

任何帮助将不胜感激.

谢谢.

推荐答案

您可以将点击处理程序附加到另一个项目/相同项目/关闭按钮，该按钮将显示以下内容:

You would attach a click handler to another item/same item/close button which would read something like this:

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

在此处尝试

这篇关于jQuery:单击时显示/消失菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！