Question

show less / more按钮（超过10个项目）仅适用于第一个和第三个无序列表。在第二个UL（也是第四个，如果添加）按钮什么都不做。我似乎无法弄明白为什么。

HTML：

<ul class="tijdlijn-list">
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
<li class="item13"></li>
<li class="item14"></li>
<li class="item15"></li>
</ul>

<ul class="tijdlijn-list">
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
<li class="item13"></li>
<li class="item14"></li>
<li class="item15"></li>
</ul>

<ul class="tijdlijn-list">
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
<li class="item13"></li>
<li class="item14"></li>
<li class="item15"></li>
</ul>

Jquery脚本：

$('.tijdlijn-list').each(function(){
var max = 10;
if ($(this).find('li').length > max) {
    $(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><div class="show_more">Toon alles</div></li>');
    $('.sub_accordian').click( function(){
        $(this).siblings(':gt('+max+')').toggle();
        if ( $('.show_more').length ) {
            $(this).html('<div class="show_less">Toon minder</div>');
        } else {
            $(this).html('<div class="show_more">Toon alles</div>');
        };
    });
};
});

Answer 1

我认为您的问题是$(this)内onclick事件无法正确触发。您可以尝试使用

$(this).find('.sub_accordian').click( function(){

所以$(this).find('.sub_accordian').click( function(){代替('.sub_accordian').click( 这是一个例子： https://jsfiddle.net/wa12rvgg/2/

无序列表按钮显示更多/更少不在第二个列表上工作

1 个答案: