Jquery Toggle Menu / Показать и скрыть функцию - PullRequest
Новая
       39

Jquery Toggle Menu / Показать и скрыть функцию

0 голосов
/ 19 декабря 2011

Я использую меню боковой панели 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 %>

Ваша помощь приветствуется.Пожалуйста, см. Пример рис. Ниже.

Спасибо, Сэм

enter image description here

Редактировать: чтобы устранить проблему с меню, включающим питание, просто переместите <% control Menu (2)%> выше и <% end_control%> ниже конечного div меню.Решение Js состоит в том, чтобы использовать новые Js Мэтта.Спасибо Мэтт, Янк и Майло!Я ценю вашу помощь!

Ответы [ 3 ]

1 голос
/ 20 декабря 2011

Вы никогда не говорите своей системе не печатать стрелку вниз, если нет дочерних элементов.Он добавляет стрелку к каждому 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");
  }

});

В настоящее время я нахожусь на обеденном перерыве и не имею времени полностью проверить это.Я не проверял, будет ли это работать.

РЕДАКТИРОВАТЬ: Измененный код после того, как Сэм вставил свой чистый HTML.

РЕДАКТИРОВАТЬ2: После того, как Сэм предоставил скрипку, я разложил ее и внес исправления.Скрипка: http://jsfiddle.net/GvGoldmedal/Wp2em/

1 голос
/ 20 декабря 2011

Вы можете установить фон в коде шаблона вместо использования 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 %>
1 голос
/ 20 декабря 2011

Я не понимаю язык шаблонов, который вы используете для создания своего меню, но я мог бы помочь с jQuery. Было бы очень полезно, если бы вы могли предоставить окончательно сгенерированный HTML-код вашего меню.

Я предполагаю, что ваши элементы div являются элементом меню, ваши элементы h3 - содержимым пункта меню, а ваш ul - подменю. Если это правильно, вы можете скрыть стрелки, добавив следующую строку в вашу основную функцию: 

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

Если вы обнаружите, что этот код слишком медленный, вы можете идентифицировать меню без подменю на стороне сервера и назначить им класс, что-то вроде menu_no_submenu, чтобы вы могли затем заменить сложный селектор в приведенном выше коде намного быстрее ' .menu_no_submenu 'или, что еще лучше, сделать всю вещь, скрывающую стрелки, в css.

...