Применение функции jquery к нескольким div?

Question

Код ниже будет показывать / скрывать div при нажатии. Он отлично работает для первого перечисленного div, но не работает ни для одного из остальных. Есть ли способ применить функцию ко всем элементам с одинаковыми именами классов? Разумеется, он должен открывать / закрывать только тот элемент Div, к которому он применяется (т. Е. Нажатие на переключающую кнопку второго элемента Div должно открывать / закрывать только второй элемент Div, а не остальные ...)

// this is the markup
<div class="collapsible-item">
    <div class="collapsible-item-title">
        <div class="item-title-header"> First Div</div> 
        <img src="/images/expand.png" alt="Expand this section" class="toggle-button">
        </div>
    </div>
    <div style="display: none;" class="togglethis">
        Cras cursus sodales odio, quis consectetur felis ultricies in. 
    </div>
</div>

<div class="separator"></div>

<div class="collapsible-item">
    <div class="collapsible-item-title">
        <div class="item-title-header"> Second Div</div> 
        <img src="/images/expand.png" alt="Expand this section" class="toggle-button">
        </div>
    </div>
    <div style="display: none;" class="togglethis">
        Cras cursus sodales odio, quis consectetur felis ultricies in. 
    </div>
</div>

<div class="separator"></div>

<div class="collapsible-item">
    <div class="collapsible-item-title">
        <div class="item-title-header"> Third Div</div> 
        <img src="/images/expand.png" alt="Expand this section" class="toggle-button">
        </div>
    </div>
    <div style="display: none;" class="togglethis">
        Cras cursus sodales odio, quis consectetur felis ultricies in. 
    </div>
</div>

И это JQuery:

$(document).ready(function () {
        $('.toggle-button').toggle(
            function() {
                $(this).attr('src', '/images/collapse.png');
                $(this).parent().siblings('.togglethis').slideToggle('slow');
            },
            function() {
                $(this).attr('src', '/images/expand.png');
                $(this).parent().siblings('.togglethis').slideToggle('slow');
            }
        );

        $('.item-title-header').toggle(
                function() {
                        $('.toggle-button').attr('src', '/images/collapse.png');
                        $(this).parent().siblings('.togglethis').slideToggle('slow');
                },
                function() {
                        $('.toggle-button').attr('src', '/images/expand.png');
                        $(this).parent().siblings('.togglethis').slideToggle('slow');
                }
        );
   });

Answer 1

Основная проблема в том, что вы не соответствовали </div> s внутри ваших collapsible-item-title div s. Просто удалите это, и это исправит переключение. Вы также можете добавить косые черты в свои теги img.

Также я предполагаю, что вместо

$('.toggle-button').attr('src', '/images/collapse.png');

вы хотели иметь

$(this).siblings('.toggle-button').attr('src', '/images/collapse.png');

Вот исправленный код, размещенный на JS Bin:
http://jsbin.com/iruvo (редактируется через http://jsbin.com/iruvo/edit)

Наконец, вы можете значительно упростить ваш код jQuery путем рефакторинга ваших обработчиков событий в одну функцию:

function toggleIt() {
  var collapsibleItem = $(this).parents('.collapsible-item');
  var toggleButton = collapsibleItem.find('.toggle-button')
  var currentImage = toggleButton.attr('src');

  toggleButton.attr('src', currentImage === minusIcon ? plusIcon : minusIcon);

  collapsibleItem.find('.togglethis').slideToggle('slow');
}

$('.toggle-button, .item-title-header').toggle(toggleIt, toggleIt);

Answer 2

Как то так?

<script>
$(document).ready(function () {

    $.fn.toggleTo = function( options ) {
        options = $.extend( options, {
        containerClass:'collapsible-item',
        speed:'slow',
        collapse:'/images/collapse.png',
        expand:'/images/expand.png',
        toggleClass:'togglethis'
        });

        return this.each(function() {

        var p = $(this).closest('.' + options.containerClass);

        $(this).toggle(function() {
            $(p).find('.toggle-button').attr('src', options.collapse);
            $(p).next('.' + options.toggleClass).slideToggle('slow');
        }, function() {
            $(p).find('.toggle-button').attr('src', options.expand);
            $(p).next('.' + options.toggleClass).slideToggle('slow');
        });
        });
    }

    $('.item-title-header, .toggle-button').toggleTo();
   });

</script>

http://jsbin.com/ayula

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

Answer 3

У вас несоответствие открытия и закрытия тегов DIV. Возможно, это либо закрывающий тег DIV в строке открывающего тега DIV класса item-title-header , либо две строки ниже этого.

Вы также можете сделать его более компактным, используя это:

$(document).ready(function() {
    $('.collapsible-item-title').toggle(
        function() {
            $(this).attr('src', '/images/collapse.png')
                .next('.togglethis').slideToggle('slow');
        },
        function() {
            $(this).attr('src', '/images/expand.png')
                .next('.togglethis').slideToggle('slow');
        }
    );
});

Answer 4

Вы, ребята, делаете этот звук слишком сложным. Уверен, это все, что вам нужно:

$(document).ready(function() {
    $('.toggle-button').click(function(){
         $(this).parent().next().slideToggle('slow');
    });
});