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

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

谢谢 山姆

编辑：要解决吃掉菜单的问题，只需将 移动到菜单的结束 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 &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 %>