Пользовательский аккордеон - использование каждого

Question

Я пытаюсь создать пользовательский аккордеон для своей страницы, на котором будут отображаться мои посты.У меня это в формате списка с использованием HTML, и я пытаюсь создать эффект, когда вы щелкаете по каждому заголовку, чтобы развернуть, чтобы показать больше информации.

Но я не хочу иметь, скажем, шесть блоков кода для шести <li> элементы, которые у меня есть на странице.

Есть ли способ запустить это через .each();возможно?Вместо того, чтобы создавать каждый раздел?Попробуйте более динамичный подход.

Answer 1

Вы посмотрели этот учебник ?

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script>

  

Все элементы с именем класса & # 8220; msg_body & # 8221; сворачивается при загрузке страницы.

     

& # 8220; slideToggle () & # 8221; функция jQuery используется для раскрытия и свертывания & # 8220; div & # 8221; с классом & # 8220; msg_body & # 8221 ;.      

Когда пользователь нажимает на элемент с классом & # 8220; .msg_head & # 8221 ;, затем div с классом & # 8220; msg_body & # 8221; рядом с ним переключается с эффектом скольжения, делая панель переключения с помощью jQuery.

Answer 2

Проверить это тоже довольно просто ДЕМОНСТРАЦИЯ : http://demos.pankaj.pro/jquery-tutorial-guide-to-build-a-simple-accordion/

код http://time2hack.com/2013/01/jquery-tutorial-guide-to-build-a-custom-and-simple-accordion.html