Лучший способ создания меню аккордеона jQuery?

Я пытался изучить Javascript/jQuery и попытался создать меню аккордеона, по существу, скопировав код на странице this. Однако, когда я пытаюсь сделать несколько div, будет работать только первый. Если я переключу идентификаторы на классы, тогда оба div расширяются, когда я нажимаю. Это сценарий, который я схватил из W3Schools;Лучший способ создания меню аккордеона jQuery?

$(document).ready(function(){ 
    $(".flip").click(function(){ 
     $(".panel").slideToggle("slow"); 
    }); 
});

Тогда в HTML У меня есть

 <div class="flip">Category A</div> 
     <div class="panel"> 
      One <br/> 
      Two <br/> 
      Three <br/> 
      Four <br/> 
     </div> 
     <div class="flip">Category B</div> 
     <div class="panel"> 
      One <br/> 
      Two <br/> 
      Three <br/> 
      Four <br/> 
     </div>

И КСС -

#flip, #panel{ 
    width: 350px; 
    text-align: center; 
    font-family: arial, sans-serif; 
    color: white; 
    font-size: 2em; 
    margin: 0 auto; 
} 

#flip{ 
    height: 40px; 
    padding: 10px 0; 
    background-color: #cc44ff; 
} 

#panel{ 
    display: none; 
    background-color: orange; 
}

мне удалось заставить его работать, если я дублировать функции и классы и дать им новые имена, но кажется беспорядочным и ненужным. Есть ли более чистый способ сделать это?

Я отправил его в JSFiddle, а также - http://jsfiddle.net/Nikf/k1wstb5n/

источник

2015-10-18 Uesls

Проблема в том, что $(".panel") адреса все соответствующие элементы, а не только представляющие интерес.

Начиная с щелкнули элемента this, вы можете «пройти через DOM», чтобы выбрать следующий.panel, игнорируя все остальные:

$(".flip").click(function() { 
    $(this).next(".panel").slideToggle("slow"); 
});

DEMO (с использованием HTML от вопроса с надлежащим скорректированной CSS)

источник

2015-10-18 09:07:00

Это не очень хорошая идея, потому что это слишком сильно зависит от html. –

@ Roamer-1888 Работал для меня. Спасибо, кучи. – Uesls

Update Fiddle Изменить идентификатор класса:

<body> 
     <div class="sidebar"> 
      <div class="cat"> 
       <div class="flip">Category A</div> 
       <div class="panel"> 
        One <br/> 
        Two <br/> 
        Three <br/> 
        Four <br/> 
       </div> 
      </div> 
      <div class="cat"> 
       <div class="flip">Category B</div> 
       <div class="panel"> 
        One <br/> 
        Two <br/> 
        Three <br/> 
        Four <br/> 
       </div> 
      </div> 
     </div> 
</body>

CSS:

*{ 
    padding: 0; 
    margin: 0; 
} 

html{ 
    height: 100%; 
} 

.sidebar{ 
    width: 320px; 
    height: 100%; 
    background-color: ; 
} 

.flip, .panel{ 
    width: 350px; 
    text-align: center; 
    font-family: arial, sans-serif; 
    color: white; 
    font-size: 2em; 
    margin: 0 auto; 
} 

.flip{ 
    height: 40px; 
    padding: 10px 0; 
    background-color: #cc44ff; 
} 

.panel{ 
    display: none; 
    background-color: orange; 
}

И с помощью .cat контейнера для элементы просто используют этот jquery:

$(document).ready(function(){ 
    $(".flip").click(function(){ 
     $(this).siblings('.panel').slideToggle("slow"); 
    }); 
});

источник

2015-10-18 09:05:39

Эй, я дал вашему коду выстрел, и он хорошо работает, как только я добавлю класс «cat». Не могли бы вы объяснить или дать больше информации о том, почему добавление этого класса заставляет его работать и почему это лучше? – Uesls

Код jQuery, который вы использовали, не работал должным образом, потому что вы нацеливали все элементы .panel. использование контейнера, такого как «.cat», ограничивало бы код локальным контейнером каждого элемента и, следовательно, вы управляли кодом .panel, как я показал. Ответ, который вы приняли выше, является правильным, но не является общим и слишком зависимым от html. –

Лучший способ создания меню аккордеона jQuery?

ответ

Смежные вопросы