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代码 - -------------------------------------------- / < / p>

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

/ ------------------------------------这是我的网页.- --------------------------------------------- /

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

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

由于萨姆

enter image description here

编辑：要解决吃饭菜单问题，只需移动＆lt;％control Menu（2）％＆gt;以上和＆lt;％end_control％＆gt;低于菜单的结束部分。 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 %>

Jquery切换菜单/显示和隐藏功能

3 个答案: