Question

我需要一些帮助，在第n个孩子之后显示/隐藏列表项，并附加更多/更少依赖于父类的链接。如果父级具有“扩展”类，我将如何附加链接较少的列表项？

到目前为止我所拥有的代码（见下文）的问题是，即使父类具有“扩展”类，我最初也会附加“更多”链接。单击该项目后，它将正常运行。

您还可以查看fiddle here

$('ul.expandible').each(function(){
    var lis = $(this).find('li:gt(4)');
    if(!$(this).hasClass('expanded')) {
        lis.hide();
    } else {
        lis.show();
    }
    
    if(lis.length>0){
        $(this).append($('<li class="expand"><span>More</span></li>').click(function(event){
            var $expandible = $(this).parents('.expandible');
            $expandible.toggleClass('expanded');
            if ( !$expandible.hasClass('expanded')) {
                $(this).text('More');
            } else {
                $(this).text('Less');
            };
            lis.toggle();
            event.preventDefault();
        }));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>First List with "expanded" class loaded</h3>
<ul class="expandible expanded">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
    <li>Option 7</li>
</ul>

<h3>Second List without "expanded" class</h3>
<ul class="expandible">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
    <li>Option 7</li>
</ul>

Answer 1

你几乎就在那里。试试这个;

＆＃13;

$('ul.expandible').each(function(){
    var $ul = $(this),
        $lis = $ul.find('li:gt(4)'),
        isExpanded = $ul.hasClass('expanded');
    $lis[isExpanded ? 'show' : 'hide']();
    
    if($lis.length > 0){
        $ul
            .append($('<li class="expand"><span>' + (isExpanded ? 'Less' : 'More') + '</span></li>')
            .click(function(event){
                var isExpanded = $ul.hasClass('expanded');
                event.preventDefault();
                $(this).text(isExpanded ? 'More' : 'Less');
                $ul.toggleClass('expanded');
                $lis.toggle();
            }));
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>First List with "expanded" class loaded</h3>
<ul class="expandible expanded">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
    <li>Option 7</li>
</ul>

<h3>Second List without "expanded" class loaded</h3>
<ul class="expandible">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
    <li>Option 7</li>
</ul>

＆＃13;

我很匆忙，所以我的回答有点短。对于那个很抱歉。现在解释：

使用$符号为您的jQuery对象添加前缀。
缓存您的jQuery变量以供将来使用，如果您要再使用它们一次，例如$ul = $(this);
您可以使用数组元素等jQuery方法。将它与三元运算符结合使用，您可以使用以下快捷键：$lis[isExpanded ? 'show' : 'hide']();

显示/隐藏列表项并添加更多/更少的链接

1 个答案: