Использование slideToggle () для ближайшего или следующего div

#jquery #html #slidetoggle

#jquery #HTML #slidetoggle

Вопрос:

Хорошо, переделываем вопрос на гораздо более простой.

Вот мой HTML-код.

 <p>
<span id="tripTitle">Trip #1</span>amp;nbsp;
    <span class="expandicon" style="display:none;">
        <span class="flip">
        <img class="expand" src="img/expand1.png" />
        </span>
    </span>
    <span class="shrinkicon">
        <span class="flip">
        <img class="shrink" src="img/shrink1.png" />
        </span>
    </span>
</p>
<div class="panel"><table id="table" width="100%">
some text here.
</div>

и вот Java:

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

HTML-код будет повторяться 10 раз на одной странице или для каждой созданной поездки. Код javascript переключит все div с классом «panel». Вопрос в том, есть ли способ, чтобы единственный div, который переключается, был ближайшим или рядом с изображением с нажатым классом «flip»?

Кстати, вот его jsfiddle. http://jsfiddle.net/LyUnB /

Ответ №1:

Использование

 $(this).parent().nextAll(".panel:eq(0)").slideToggle("slow");

.panel является родным братом родительского узла .flip

1. Это абсолютно работает. Но, похоже, в конце есть некоторая несогласованность в перемещении таблицы. Есть идеи, что является причиной этого?

2. Я не могу дать ответ, не увидев ваш CSS

3. На самом деле у меня не так много CSS, кроме редактирования шрифтов, просто использую классы для jQuery. Здесь вы можете увидеть мой пример на jsfiddle.net/LyUnB

4. Понял. Просто добавьте еще один .parent(). $(this).parent().parent().nextAll(«.panel:eq(0)»).slideToggle(«медленный»); Спасибо, @DR.Molle.

Ответ №2:

Или вы можете просто использовать

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

У вас есть кнопка расширения, сжатия внутри другого диапазона, поэтому, когда вы проверяете .next() в jQuery, она не находит '.panel' , мы делаем один шаг назад, используя parent() , а затем .next() перейдем к '.panel' div

Спасибо

1. Он переключается только при отображении кнопки сворачивания; ничего не делает, когда я нажимаю развернуть, но меняю изображение на минимизированное. Кроме того, если я оберну первые три строки HTML, которые я опубликовал, с помощью , переключение кажется неэффективным. Новичок здесь.

2. Да, вы должны позаботиться о структуре html, если вы измените макет html, вам также придется изменить JS. Что касается вашего другого вопроса о отображении изображения, вы можете просто изменить img src дочернего изображения внутри flip span.

3. Есть ли еще один уровень выше родительского? Это если я оберну текст заголовка и изображение в . Спасибо @aamir.

4. вы можете использовать $(this).parent().parent().parent()... n-й раз

Ответ №3:

Попробуйте:

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

Редактировать:

Отлично работает в моей системе. Вот рабочий пример с jsfiddle

1. Это ничего не дает, мой друг.

2. @MikeSanchez, здесь все работает нормально. Я обновил свой ответ ссылкой на рабочий пример.

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