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 是一个子菜单。如果这是正确的，您可以通过将以下行添加到您的 main 函数来隐藏箭头：

$('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");
  }

});

目前我在午休时间，没有时间对此进行全面测试。我没有证实这会奏效。

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

EDIT2：Sam 提供小提琴后，我将其分叉并进行了更正。小提琴：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 回答