Question

我有这段代码：

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

   }
});

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

编辑：

继续使用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（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>

Answer 1

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

你可以试试这个：

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

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

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

Answer 2

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

例如，在点击功能中添加如下内容：

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

（很难说没有一些HTML可以使用它。）

Answer 3

显示或隐藏匹配的元素。

<强>肘节

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

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

jQuery：显示和隐藏菜单

3 个答案: