0

私はJquery Toggleサイドバーメニューを使用しているので、メニューをクリックするたびにメニューを押し下げてサブメニューを表示するための下向き矢印がメニューにあります。私の問題は、子メニュー/サブメニューがなく、下向き矢印がまだ表示されていて、それをクリックすると、下の同じレベルのメニューが表示されることです。Silverstripe のメニューを使用しています。子メニュー/サブメニューがある場合にのみ矢印を表示するにはどうすればよいですか?

/ -------------------------------------------------------------- こちら私のトグルメニューjs-------------------------------------------------- ---- /

$(document).ready(function() {

$('.second_level').hide();

$("div.menu > h3").css("background", "url(themes/tutorial/images/menuarrowdown.gif) no-repeat right");

$('div.menu > h3').click(function() {

$(this).next().slideToggle('fast', function() {

//set arrow depending on whether menu is shown or hidden
if ($(this).is(':hidden')) {

$(this).prev().css("background", "url(themes/tutorial/images/menuarrowdown.gif) no-repeat right");
} else {
$(this).prev().css("background", "url(themes/tutorial/images/menuarrowup.gif) no-repeat right");
}
return false;
});
});
});

/ ------------------------------------私のHTMLコードはこちら-------- -------------------------------------- /

<div id="productmenu"> <!-- productmenu starts -->
<div class="menu">                      
  <h3><a href="#">Category 1</a></h3>
    <ul class="second_level">
      <li><a href="page.html">Option 1</a></li>
      <li><a href="page.html">Option 2</a></li>
   </ul>
</div> <!-- /menu -->

<div class="menu">

   <h3><a href="#">Category 2</a></h3>

</div> <!-- /menu -->

<div class="menu">
  <h3><a href="#">Category 3</a></h3>
     <ul class="second_level">
      <li><a href="page.html">Option 1</a></li>
       <li><a href="page.html">Option 2</a></li>
      <li><a href="page.html">Option 3</a></li>
    </ul>
</div> <!-- /menu -->
</div><!-- /productmenu -->

/ ------------------------------------私のページはこちらです.ss------- ------------------------------------------------------ / 

  <% control Menu(2) %>

     <h3><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></h3>

        <% if Children %>   <ul class="second_level">
              <% control Children %>
               <li class="$LinkingMode"><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></li>
              <% end_control %></ul>

        <% end_if %>
  <% end_control %>

あなたの助けに感謝します。以下の例の写真を参照してください。

ありがとうサム

ここに画像の説明を入力

編集: メニューを食い尽くす問題を修正するには、<% control Menu(2) %> をメニューの終了 div の上に移動し、<% end_control %> を下に移動します。Js の解決策は、Matt の新しい Js を使用することです。マット、イアンク、マイロに感謝！私はあなたの助けに感謝します！

4

3 に答える 3

1

メニューの作成に使用しているテンプレート言語はわかりませんが、jQuery についてはお手伝いできるかもしれません。最終的に生成されたメニューの html を提供していただけると大変助かります。

div 要素はメニュー項目、h3 要素はメニュー項目コンテンツ、ul はサブメニューであると想定しています。これが正しければ、メイン関数に次の行を追加して矢印を非表示にすることができます。

$('div.menu:has(ul.second_level) > h3').css('background', '');

このコードが遅すぎるとわかった場合は、サーバー側でサブメニューのないメニューを識別し、それらに menu_no_submenu のようなクラスを与えることができるので、上記のコードの複雑なセレクターをはるかに高速な '.menu_no_submenu' に置き換えることができます。または、さらに良いことに、CSS ですべての矢印を非表示にします。

于 2011-12-19T20:40:18.360 に答える
1

子が存在しない場合に下矢印を出力しないようにシステムに指示することはありません。メニューに存在するすべての H3 に矢印を追加し、子があるかどうかを考慮しません。そのため、各メニュー項目をチェックして、子があるかどうかを確認する必要があります。次のようにする必要があります。

$("div.menu").each(function(){

  if($(this).children().length > 1) // See if the H3 is the only child
  {
      $(this).children("H3").css("background", "url(themes/tutorial/images/menuarrowdown.gif) no-repeat right");
  }

});

現在、私は昼休み中で、これを完全にテストする時間がありません。これが機能することは確認していません。

編集: サムが純粋な HTML を挿入した後にコードを修正しました。

EDIT2: サムがフィドルを提供した後、私はそれをフォークして修正を加えました.フィドル: http://jsfiddle.net/GvGoldmedal/Wp2em/

于 2011-12-19T20:42:21.563 に答える
1

jQuery を使用するのではなく、テンプレート コードで背景を設定できます。

背景を含む css クラスを作成します。

.menuHeader { background: url("themes/tutorial/images/menuarrowdown.gif") no-repeat scroll right center transparent; }

次に、メニューに子がある場合は、テンプレート コードでクラスを h3 に設定します。

<% control Menu(2) %>
    <% if Children %>   
      <h3 class="menuHeader"><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></h3>
    <ul class="second_level">
          <% control Children %>
            <li class="$LinkingMode"><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></li>
          <% end_control %>
    </ul>
   <% else %>
        <h3><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></h3>
   <% end_if %><% end_control %>
于 2011-12-19T21:51:50.107 に答える