Попытка создать скользящее переключение подменю в JQuery - PullRequest
Новая
       29

Попытка создать скользящее переключение подменю в JQuery

0 голосов
/ 02 марта 2012

Я пытаюсь создать скользящее подменю, используя переключатель JQuery.Я пробовал следующее, но безрезультатно:

<script> $(".menu li a").click(function(){ var ul = $(this).children("ul"); if (ul.is(":none")) { ul.slideDown(); } else { ul.slideUp(); } }); </script>

, а также

<script> $("ul li.menu-item a").click(function() { $(this).children("ul").toggle(); }); </script>

Код HTML, к которому он применяется,: 

<div class="menu-brk-products-container">
<ul id="menu-brk-products" class="menu">
  <li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-65"><a>Smoke Alarms – Ionisation</a>
       <ul class="sub-menu">
           <li id="menu-item-432" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-432"><a href="/?portfolio_cats=battery-powered-smoke-alarms">Battery Powered Alarms</a>
           </li>
      </ul>
  </li>

Ответы [ 2 ]

0 голосов
/ 02 марта 2012

Попробуйте: 

<div class="menu-brk-products-container">
    <ul id="menu-brk-products" class="menu">
        <li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-65"><a>Smoke Alarms – Ionisation</a>
            <ul class="sub-menu" style="display: none">
                <li id="menu-item-432" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-432"><a href="/?portfolio_cats=battery-powered-smoke-alarms">Battery Powered Alarms</a></li>
            </ul>
        </li>
    </ul>
</div>

<script>
$(document).ready(function() {
    $(".menu li a").click(function(){ 
        var ul = $(this).parent().children("ul"); 

        if (ul.is(":hidden")) { 
            ul.slideDown(); 
        } 
        else { 
            ul.slideUp(); 
        }
    });
});
</script>

Самая большая проблема заключалась в получении детей. «this» был тегом привязки, а не элементом

, поэтому совпадений не было. Также я изменил тест на «: скрытый», если мы должны скользить вверх или вниз.
0 голосов
/ 02 марта 2012

привязка клика должна быть сделана после загрузки документа: 

$(document).ready(function() {
$("ul li.menu-item a").click(function() { $(this).children("ul").toggle(); });
});

также, этот клик привязан к элементу и, поскольку он не содержит ul , он ничего не будет делать. Если вы хотите, чтобы «Батарейные тревоги» переключались на «Дымовые тревоги ...», нажмите, затем удалите селектор «из» (но при этом «Батарейные тревоги» исчезнут при нажатии, вам потребуется другой селектор).

...