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 %>

感谢您的帮助。请参阅下面的示例图片。

谢谢 Sam

编辑：要解决吃掉菜单的问题，只需移动 <% control Menu( 2)%>上面和 <% end_control %>在菜单的 finish div 下方。 Js解决方案是使用Matt的新Js。谢谢马特、伊恩克和米洛！感谢您的帮助！

Answer 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");
  }

});

目前我正在午休，没有时间对此进行全面测试。我没有验证这是否有效。

编辑：Sam 放入纯 HTML 后修改代码。

EDIT2：Sam 提供了小提琴后，我将其分叉并进行了更正。小提琴： http://jsfiddle.net/GvGoldmedal /Wp2em/

Answer 2

我不明白您用来创建菜单的模板语言，但我也许可以在 jQuery 方面提供帮助。如果您能提供最终生成的菜单 html，将会有很大帮助。

我假设您的 div 元素是菜单项，您的 h3 元素是菜单项内容，您的 ul 是子菜单。如果这是正确的，您可以通过将以下行添加到主函数来隐藏箭头：

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

如果您发现此代码太慢，您可以识别服务器端没有子菜单的菜单，并给它们一个类，例如 menu_no_submenu ，因此您可以用更快的 '.menu_no_submenu' 替换上面代码中的复杂选择器，或者更好的是，在 css 中隐藏整个箭头。

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 "{$Title}" page">$MenuTitle</a></h3>
    <ul class="second_level">
          <% control Children %>
            <li class="$LinkingMode"><a href="$Link" title="Go to the "{$Title}" page">$MenuTitle</a></li>
          <% end_control %>
    </ul>
   <% else %>
        <h3><a href="$Link" title="Go to the "{$Title}" page">$MenuTitle</a></h3>
   <% end_if %><% end_control %>