1

我有这个代码：

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

   }
});

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

编辑：

这是顶部菜单的 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 (submenu-content-priser) 加载文件 /inc/top-menu-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>
4

3 回答 3

0

我认为您应该在document.ready中预先加载子菜单内容，然后在您编写的点击事件中显示然后将它们隐藏在下面的事件中。

你可以试试这个：

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

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

您必须使用子菜单 div 的 ID 更改“menu_content”。

于 2013-03-15T01:04:32.383 回答
0

显示或隐藏匹配的元素。

切换

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

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

于 2013-03-15T08:41:41.573 回答
0

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

例如，在 click 函数中添加如下内容：

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

（如果没有一些 HTML 就很难说。）

于 2013-03-15T01:12:37.187 回答