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

メニューのすべての子要素を非表示に設定してから、選択したものを表示する必要があると思います。

たとえば、クリック関数に次のようなものを追加します。

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

(それに付随する HTML がないとわかりにくいです。)

于 2013-03-15T01:12:37.187 に答える
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 に答える