jQuery的切換菜單/顯示和隱藏功能

Question

我正在使用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％>移至菜單的div以下。 Js的解決方案是使用Matt的新Js。 感謝Matt，Iank和Milo！ 我感謝您的幫助！

Answer 1

我不了解您用來創建菜單的模板語言，但是我可能可以為jQuery提供幫助。 如果您可以提供菜單的最終生成的html，將會有很多幫助。

我假設您的div元素是一個菜單項，您的h3元素是一個菜單項的內容，而您的ul是一個子菜單。 如果正確，則可以通過在主函數中添加以下行來隱藏箭頭：

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

如果發現此代碼太慢，則可以在服務器端識別沒有子菜單的菜單，並為它們提供一個類，例如menu_no_submenu，因此您可以用更快的'.menu_no_submenu'替換上面代碼中的復雜選擇器。或者，甚至更好，將整個箭頭隱藏在CSS中。

Answer 2

如果沒有子代，則永遠不會告訴系統不打印向下箭頭。 它將箭頭添加到菜單中存在的每個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");
  }

});

目前，我正在午休時間，沒有時間進行充分測試。 我沒有驗證這可以工作。

編輯：Sam放入純HTML之后的修改代碼。

EDIT2：Sam提供了一個小提琴后，我對其進行了分叉並進行了更正。小提琴： http : //jsfiddle.net/GvGoldmedal/Wp2em/

Answer 3

您可以在模板代碼中設置背景，而不是使用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 %>