Question

以下代码将在点击时显示/隐藏div。它适用于列出的第一个div，但不适用于任何其他div。有没有办法让函数适用于具有相同类名的所有元素？当然，它应该只打开/关闭它所应用的div（即，点击Second 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标记不匹配。它可能是类 item-title-header 的开放DIV标记行中的结束DIV标记，也可能是下面的两行。

您还可以使用此功能使其更紧凑：

$(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 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> collapsible-item-title内的div不匹配。只需删除它，它将修复切换。您可能还希望在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 4

你们这些声音太难了。很确定这就是你所需要的：

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

将jquery函数应用于多个div？

4 个答案: