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

Question

我需要一些帮助来显示/隐藏第 n-child 之后的列表项以及 append 依赖于父类的更多/更少链接。如果父级具有“expanded”类，我将如何 append 带有 less 链接的列表项？

到目前为止，我的代码的问题(见下文)是我最初 append “更多”链接，即使父级具有“扩展”类。单击该项目后，它就会正常运行。

您还可以查看 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

你就快到了。试试这个；

$('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();
            }));
    }
});

<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>

我很着急，所以我的回答有点短。对于那个很抱歉。现在解释一下:

1. 在 jQuery 对象前添加 $ 符号。
2. 如果您要多次使用 jQuery 变量，请缓存它们以供将来使用，例如 $ul = $(this);
3. 您可以使用 jQuery 方法，例如数组元素。将其与三元运算符结合使用，您可以使用如下快捷方式: $lis[isExpanded ? '显示' : '隐藏']();