jQuery的：显示和隐藏菜单

我有这样的代码：jQuery的：显示和隐藏菜单

$('.skaftetopmenu-li > a').click(function(e) { 
    e.preventDefault(); 
    var subid = $(this.parentNode).attr('id'); 
    if (subid !="forsidemenu"){ 
     var str = $('#submenu-content-'+subid).html(); 
     if ($.trim(str) == ""){ 
     $('.submenu-content', this.parentNode).load('http://' + skafte.base_url + '/inc/top-menu-subs/'+subid+'_submenu.html'); 
     } 

    } 
});

这将禁用顶部的链接。并按下时加载子元素。不过，我只能得到要显示的子元素，但当我再次按下toplink或按另一个时，我无法让它们消失。

编辑：

赫雷什AF片从TopMenu的HTML的：

<div id="header-menu"> 
    <ul id="mainmenu" style="overflow: hidden;"> 
     <li class="skaftetopmenu-li" id="forsidemenu" > 
     <a href="http://<?php echo DOMAIN?>/">Forside</a> 
     </li> 
     <li class="skaftetopmenu-li" id="priser"> 
     <a href="http://<?php echo DOMAIN?>/priser.php">Priser &amp; Sortiment</a> 
     <div class="submenu-content" id="submenu-content-priser"></div> 
     </li> 
    <li class="skaftetopmenu-li" id="onlinebestilling"> 
    <a href="http://<?php echo DOMAIN?>/bestil.php">Onlinebestilling</a> 
     <div class="submenu-content" id="submenu-content-onlinebestilling"></div> 
    </li> 
    <li class="skaftetopmenu-li" id="levering-top"> 
    <a href="http://<?php echo DOMAIN?>/levering-fadoel.php">Fad&oslash;l til Fest</a> 
    <div class="submenu-content" id="submenu-content-levering"></div> 
    </li> 
    </ul> 
</div>

上面DIV（子菜单内容-priser）加载文件/ INC /顶菜单 - subs/priser_submenu.html，看起来像这样：

<ul class="submenu-item-ul"> 
    <li class="li-content"> 
     <div class="menucontent"> 
     <div> 
      <b>Priser på Sodavand & Vand mm.</b> 
      <ul> 
       <li><a href="http://skafte.dk/priser.php?moms=1">Kassevarer med moms</a></li> 
       <li><a href="http://skafte.dk/priser.php?moms=0">Kassevarer uden moms</a></li> 
      </ul> 
     </div> 
     <div class="last"> 
      <b>Priser på Fadøl</b> 
      <ul> 
       <li><a href="http://skafte.dk/priser-fadoel.php">Fad&oslash;l, leje & udstyr til fest</a></li> 
      </ul> 
     </div> 
     </div> 
    </li> 
</ul>

来源

2013-03-15 user2171247

我想你应该有子菜单中的内容预先加载t.ready，然后在你写的点击事件中显示，然后在下面的事件中隐藏它们。

你可以试试这个：

$('body').click(function(evt){ 
    if(evt.target.id == "menu_content") 
     return; 

    $('#menu_content').hide(); 
});

你必须改变 “menu_content” 与子菜单div的ID。

来源

2013-03-15 01:04:32

谢谢，但ID是从子子不同。请参阅附件中的HTML。那么，我如何将它融入您的解决方案？ – user2171247 2013-03-15 08:31:29

我认为你需要设置菜单的所有子元素隐藏，然后显示选中的元素。

例如，添加像这样的点击功能：

$('.submenu-content').hide(); 
$(this).find('.submenu-content').show()

（很难说没有一些HTML去用它。）

来源

2013-03-15 01:12:37 Mupps

我现在附上了一些HTML，会试试你的答案。 – user2171247 2013-03-15 08:18:23

显示或隐藏匹配的元素。

肘

$('.target').toggle();

http://api.jquery.com/toggle/

来源

2013-03-15 08:41:41

我知道切换功能，我试图使用它，但我无法弄清楚如何在代码中实现它 – user2171247 2013-03-15 14:22:37

jQuery的：显示和隐藏菜单

回答

相关问题