4

我在一个页面上有几个块列出了Related Blog Posts&等内容Related Articles。

这些块被编码以返回所有结果。但是为了避免列表太长，我默认列表只显示 3 个项目，并在“显示更多”按钮中工作，单击该按钮会触发手风琴效果以显示剩余项目（如果有）。

我遇到的问题是即使块没有超过 3 个项目，也会显示显示更多按钮。似乎size()是在计算两个块的子节点总数，而不是单独计算每个块。

当然，我可以针对 2 个独特的选择器并让它工作。但是我希望这个脚本可以重复使用，而不必每次我需要另一个手风琴块时都添加一个新的选择器。

我现在的方式是，每当您想对块应用手风琴效果时，您所要做的就是在包含 HTML 列表的任何块的外部包装器中添加一个“手风琴”类。

这是我的代码。

(function($) {
    $(document).ready(function() { 
        /**
         * Define variables
         */
        var parentSelector = $('.block-views .accordion ul'),
    controlsHTML = $('<div class="show-more"><button>Show More</button></div>'),
    count = $(parentSelector).children().size();

        /**
         * Wrap all items we want to show/hide except for the first 3
         */
        $(parentSelector).children().not(':nth-child(1), :nth-child(2), :nth-child(3)').wrapAll('<div class="slide-content" />');

        /**
         * Hide content that should be hidden by default
         */
        $('.slide-content').hide();

    /**
     * Insert open/close button if there are more than three items in list
     */
    if (count > 3) {
    $(controlsHTML).insertAfter(parentSelector);
    }

        /**
         * Build the expanding content container and attach it to a click event
         */
        $(".show-more button").toggle(
            function () {
                $(this).toggleClass('collapse');
                $(this).text("Show Less");
                $(this).parents('.item-list').find('.slide-content').slideDown();
            },
            function () {
                $(this).toggleClass('collapse');
                $(this).text("Show More");
                $(this).parents('.item-list').find('.slide-content').slideUp();
            }
        );
    });
}(jQuery));
4

1 回答 1

1

您需要遍历手风琴并检查每个手风琴的长度：

(function($) {
    $(function() { 

        $('.block-views .accordion ul').each(function(i,elm) {
            var ctrl = $('<div class="show-more"><button>Show More</button></div>'),
                count = $(this).children().length;
            if (count > 3) {
                $(this).after(ctrl);
            }
        });

        $(".show-more button").data('state', true).on('click', function () {
            var state = $(this).data('state');

            $(this).toggleClass('collapse').text("Show "+(state?'Less':'More'));
                   .parents('.item-list').find('.slide-content').slideToggle().data('state' !state);
        });
    });
}(jQuery));​

另请注意，以这种方式使用的切换也已弃用！

于 2012-11-05T17:35:54.323 回答