jQuery: использование клика только по одному элементу: использование .slideToggle и .nextUntil для скрытия и отображения всех видов контента одним щелчком мыши - PullRequest
Новая
       20

jQuery: использование клика только по одному элементу: использование .slideToggle и .nextUntil для скрытия и отображения всех видов контента одним щелчком мыши

1 голос
/ 10 марта 2011

Эй!

Я расскажу прямо к теме, вот код jquery: 

jQuery(function() {
    jQuery('.entry-content h1').nextUntil('h1').hide().prev().click(function () {
        jQuery(this).nextUntil('h1').slideToggle();

});});

вот HTML: 

<div class="entry-content>
   <h1>Header 1</h1>
   <p>Paragraph 1</p>
   <ul>
      <li>Text</li>
      <li>Some more text</li>
   </ul>
   <h1>Some Images and a div</h1>
   <img src="image.jpg">
   <div class="somediv">
     <!--Some stuff -->
   </div>
   <h2>InBetween header</h2>
   <p>text</p>
   <ul>
      <il>text</li>
   </ul>
</div>

Теперь это работает почти какПредполагается, что при переключении содержимого под видимым слайдом h1s они снова переключаются вверх.НО проблема в том, что эффект происходит и при нажатии на изображение h2.Я пытался найти в сети это, но пока не получил ответа: / Я бы очень хотел получить помощь :) Симплетный небольшой скрипт, для страницы с множеством контента различного вида, у которого есть "InBetween" h1, чтобы сократитьстраницы, скрывая содержимое под ними и показывая при нажатии.

Ответы [ 2 ]

0 голосов
/ 13 марта 2011

Спасибо Джулиану, который заставил меня работать немного усерднее, чтобы решить проблему;)

Вот код, который теперь работает так, как он должен: Применяется щелчок только по элементу h1 :) Проблема была в том,Я применил щелчок ко всем элементам, thx jul:)

Вот рабочий jQuery (сделано для wp, так что конфликтный режим включен, если я корректен) 

jQuery(function() {
    jQuery('.entry-content h1').css('cursor' , 'pointer').click(function () {
    jQuery(this).nextUntil('h1').slideToggle();
    }).nextUntil('h1').hide();
});
0 голосов
/ 10 марта 2011

@ Ulle, Ваш код работает как положено.См. Следующий фрагмент определения следующей функции до тех пор, пока функция

Учитывая объект jQuery, представляющий набор элементов DOM, метод .nextUntil () позволяет нам осуществлять поиск наследников этих элементов в DOM.дерево, останавливаясь, когда он достигает элемента, соответствующего аргументу метода.Новый объект jQuery, который возвращается, содержит всех следующих братьев и сестер вплоть до, но не включая тот, который соответствует селектору .nextUntil ().Если селектор не соответствует или не указан, будут выбраны все следующие братья и сестры;в этих случаях он выбирает те же элементы, что и метод .nextAll (), когда не предусмотрен селектор фильтра.

Полное определение можно найти здесь

Вы прикрепили событие Click ко всем следующим братьям и сестрам.

...