Блог

Главная - Вопросы по программированию - Как настроить таргетинг на следующий элемент с именем класса?

Как настроить таргетинг на следующий элемент с именем класса?

#javascript #jquery #html #accordion #slidetoggle

#javascript #jquery #HTML #аккордеон #slidetoggle

Вопрос:

ДЕМОНСТРАЦИЯ

Я делаю простой эффект аккордеона jquery, как показано ниже.

JQUERY

 $(function ($) {
  $('.Accordian').find('.Btn').click(function () {
    $(this).next('.Content').slideToggle('fast');
    $('.Content').not($(this).next()).slideUp('fast');
  });
});

HTML

 <div class="Accordian">
  <div class="Btn"></div>
  <div class="Content"></div>
</div>

Однако это отлично работает, если содержимое помещается между .Btn ними, а .Content затем оно прерывается.

ВОПРОС

  1. Как напрямую настроить таргетинг на следующее доступное имя класса относительно нажатой кнопки?
  2. Как настроить таргетинг на все элементы имени класса, кроме следующего доступного имени класса относительно нажатой кнопки?

Комментарии:

1. » если содержимое помещается между . Btn и . Содержимое » — я не понял эту часть. Почему вы хотите разместить содержимое снаружи .Content ? можете ли вы уточнить ..?

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

3. Я добавил комментарий перед проверкой скрипки. «элементы» или «содержимое html» было бы более понятным вместо «содержимого», поскольку у вас уже есть такой div…

4. @Obsidion если вы пытаетесь настроить таргетинг только на . Содержимое и оставить видимым «прерывающий текст» .. тогда ПОЧЕМУ вы ориентируетесь на него в первую очередь?

5. Если вы собираетесь проголосовать против, по крайней мере, проявите порядочность, чтобы объяснить, почему!

Ответ №1:

Попробуйте с помощью siblings()

 $(function ($) {
    $('.Accordian').find('.Btn').click(function () {
        //cache the value so that it can be used in the next statement
        var $content = $(this).siblings('.Content').slideToggle('fast');
        $('.Content').not($content).slideUp('fast');
    });
});

Ответ №2:

Попробуйте использовать .nextAll() вместе с .first() для выполнения вашей задачи, на самом деле здесь мы использовали .first() в целях безопасности.

   $('.Accordian').find('.Btn').click(function () {
    var targetElem = $(this).nextAll('.Content').first();
    targetElem.slideToggle('fast');
    $('.Content').not(targetElem).slideUp('fast');
  });

ДЕМОНСТРАЦИЯ