Блог

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

Каждый из списков меню отображается встроенным, так что они располагаются рядом друг с другом по 3 в строке, затем подменю появится непосредственно под ним, занимая всю ширину страницы, и переместит остальную часть меню вниз по странице.

У меня возникли проблемы с тем, чтобы при нажатии пункта 1 отображалось только подменю 1 и так далее. В настоящее время при нажатии любого элемента будет отображаться подменю 1.

Ниже приведен html…

 <ul id="menu">
        <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<div class="sub-menu 1">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu 2">
        <ul>
            <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu 3">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>   




<ul id="menu">
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

<div class="sub-menu 4">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu 5">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu 6">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>
  

Ниже приведен jquery

 $(document).ready(function(){
    $("#menu > li").toggle(
    function(){

             $("#buying-guide-homepage > li").animate({height:109},"slow");
             $(".sub-menu 1").slideDown("slow");

        },
        function(){

        $(".sub-menu 1").slideUp("slow");
        $("#buying-guide-homepage > li").animate({height:89},"slow");

        });
 });
  

Я полагаю, что проблема заключается в пробелах, которые у вас есть между .sub-menu и номером. Если вы измените свой код на use .sub-menu-1 .sub-menu-2 и так далее, я думаю, вы обнаружите, что это работает.

Причина, по которой я думаю, что это так, заключается в том, что пробел обозначает применение второго класса к этому объекту в DOM. Итак, у вас .sub-menu 1 на самом деле два класса, sub-menu и 1 . Вы также могли бы просто выбрать по .1 и вы бы получили нужный элемент. Если вы попытаетесь просто сделать $(".sub-menu 1").html("CHANGED THE HTML"); , вы увидите, что ничего не изменится. Но если вы измените его на $(".1").html("CHANGED"); или измените имя класса на sub-menu-1 , а затем выполните $(".sub-menu-1").html("CHANGED") , это тоже сработает.

Если вы измените свой html следующим образом:

 <ul id="menu">
     <li id='sub-menu1'>Item 1</li>
    <li id='sub-menu2'>Item 2</li>
    <li id='sub-menu3'>Item 3</li>
</ul>

<div class="sub-menu1">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu2">
        <ul>
            <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu3">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>   




<ul id="menu">
    <li id='sub-menu4'>Item 4</li>
    <li id='sub-menu5'>Item 5</li>
    <li id='sub-menu6'>Item 6</li>
</ul>

<div class="sub-menu4">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu5">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu6">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>
  

Вы могли бы сделать:

 $('div[class^="sub-menu"]').hide();
$("#menu > li").click(function(event){
    var id = event.target.id;
    console.log(id);
    $('div[class^="sub-menu"]').hide();
    $('div[class="' id '"]').show();

});
  

разберемся здесь:http://jsfiddle.net/ZEKNM /

РЕДАКТИРОВАТЬ — ОБНОВИТЕ, чтобы скрыть отображаемое меню при нажатии

 $('div[class^="sub-menu"]').hide();
$("#menu > li").click(function(event){
    var id = event.target.id;
    var div =  $('div[class="' id '"]');  
    if(div.is(':visible')){
       div.hide();
     }else{
       $('div[class^="sub-menu"]').hide();
       div.show();
      }

});
  

Обновленная скрипка здесь:http://jsfiddle.net/ZEKNM/1 /

http://jsfiddle.net/dNcpJ/1/

Вероятно, есть лучший способ выбрать, какое меню показывать, я просто взял внутренний текст меню верхнего уровня в качестве идентификатора подменю.