Одна функция jQuery для переключения нескольких элементов по отдельности

#jquery #html

#jquery #HTML

Вопрос:

Мне нужна одна функция jQuery, которую можно повторно использовать для переключения нескольких элементов по отдельности. Пример кода на странице jQuery вhttp://api.jquery.com/slidetoggle / хорошо работает для одного элемента, использующего кнопку, но не для нескольких элементов, использующих элементы без кнопок.

Мой код (адаптирован из примера jQuery slidetoggle):

 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideToggle demo</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>

<div class="first">Toggle first</div>
    <p class="first">First hidden paragraph.</p>
<div class="second">Toggle second</div>
    <p class="second">Second hidden paragraph.</p>

<script>
$( "div.first" ).click(function() {
$( "p.first" ).slideToggle(0);
});
</script>

<script>
$( "div.second" ).click(function() {
$( "p.second" ).slideToggle(0);
});
</script>

</body>
</html>

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

Это повторяющийся и неэффективный метод, поскольку для каждого элемента, который я хочу сделать переключаемым, необходимо написать новый скрипт (я бы предпочел единственную функцию, которая переключала бы любой элемент с определенным именем класса).
По умолчанию страница отображается со всеми элементами, отображаемыми полностью. Я бы предпочел, чтобы переключаемые элементы были скрыты по умолчанию.

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

1. Добавьте общий класс к похожим элементам — проверьте это: jsfiddle.net/VUs5W

2. Шаунак, спасибо, но это только переключение между первым и вторым, мне нужно иметь возможность отображать оба одновременно, если это необходимо.

Ответ №1:

Используйте один и тот же класс для всех наборов с источником события. Вы можете достаточно эффективно использовать только два класса для n количества наборов html.

Живая демонстрация

 <div class="first">Toggle first</div>
    <p class="first-p">First hidden paragraph.</p>
<div class="first">Toggle second</div>
    <p class="first-p">Second hidden paragraph.</p>

Используйте текущий объект с помощью next()

 $('.first-p').hide();   
$( "div.first" ).click(function() {
    $(this).next().slideToggle(1000);
});

Ответ №2:

 $(function () {
    $(".first, .second")
    .filter("p")
    .toggle()
    .addBack()
    .not("p")
    .click(function (e) {
       return $("."   e.target.className).not("div").slideToggle(0)
    });
});

jsfiddle http://jsfiddle.net/guest271314/6aMk7 /