3

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

我的情况：

我有一个导航栏，其中的每个链接都激活/触发一个 megamenu（每个链接都有自己的 megamenu）。

我需要的：

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

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

  2. 用户单击导航栏中的相同项目。

  3. 用户单击 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/

任何帮助将不胜感激。

谢谢。

4

3 回答 3

2

我能够得到这个其他的解决方案，它也像一个魅力：

$(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-16T17:25:21.843 回答
1

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

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

在这里试试

于 2010-11-16T17:10:35.623 回答
0

对于 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-16T17:00:53.133 回答