Question

如何在列表中添加隐藏/显示元素的功能？

例如我们有几个列表。点击“显示”链接时，显示所有列表项目，点击“隐藏”链接，隐藏索引大于3的列表中的项目。

<div class="filter_item">
...
<h3>Network Name:</h3>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
...
</div>

和js代码

<script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function($){
            $('.filter_item ul').each(function(){
                $('li:gt(2)', this).hide();
                if ($(this, 'li').children().length > 3) {
                    $(this, ':last').append('<li><a href="javascript:void(0);" class="tr_more">More...</a></li>');
                }
            });
            $('.tr_more').toggle(function(){
                $(this).closest('li').siblings().show();
                $(this).attr('class', 'tr_less').text("Less...");
            }, function(){
                ????
            });
        });
    //]]>
</script>

点击“隐藏”链接后如何实施隐藏项目？

Answer 1

虽然这看起来过于复杂，但这对您有用：

$(this).closest('ul').children('li:gt(2):not(:last)').hide();

首先，它搜索父<ul>，然后隐藏子<li>，但保留“显示/隐藏”链接的父级。

使用$(this).closest('li').prevAll().slice(2).hide();并不能很好地工作 - 它隐藏了第一个节点，而不是最后一个节点。 prevAll似乎以相反的顺序返回元素。

Answer 2

您可以在前三个元素之后向li个元素添加一个类，而不是单独显示和隐藏每个元素，然后使用CSS通过向ul父级添加一个类来显示和隐藏它们：

使用Javascript：

$(function(){

  $('.filter_item ul')
  .addClass('hidemore')
  .each(function(){ $(this).find('li:gt(2)').addClass('more'); })
  .append($('<li/>').append($('<a/>').attr('href','javascript:void(0)').text('more...')))
  .find('a').toggle(function(){
    $(this).text('less...').closest('ul').removeClass('hidemore');
  },function(){
    $(this).text('more...').closest('ul').addClass('hidemore');
  });

});

CSS：

.filter_item ul.hidemore li.more { display: none; }

注意：
带有javascript:void(0)的href属性会添加到链接中，以便它们显示为链接，但不会在任何位置导航。这样点击处理程序就不必停止事件了。

添加元素后的.find('a')是因为它不能将click事件处理程序添加到元素中，直到它们被添加到页面之后。（如果列表中的文本也包含链接，则需要在添加的链接中添加一个类，以便在此阶段可以特定地定位它们。）

Answer 3

最终代码如下所示

jQuery(document).ready(function($){
    $('.filter_item ul').each(function(){
        $('li:gt(2)', this).hide();
        if ($(this, 'li').children().length > 3) {
            $(this, ':last').append('<li><a href="javascript:void(0);" class="tr_more">More...</a></li>');
        }
    });
    $('.tr_more').toggle(function(){
        $(this).closest('li').siblings().show();
        $(this).attr('class', 'tr_less').text("Less...");
    }, function(){
        $(this).closest('ul').children('li:gt(2):not(:last)').hide();
        var curr_ul_y_pos = $(this).closest('ul').prev().offset().top;
        $('html:not(:animated), body:not(:animated)').animate({
            scrollTop: curr_ul_y_pos-5
        }, 'normal');
        $(this).attr('class', 'tr_more').text("More...");
    });
});

隐藏事件后添加了被遗忘的属性。现在页面滚动到h3元素位置。

Answer 4

$('.hidelink').click(function(){
     $(this).children('li').hide();
});

这样做

Answer 5

您也可以使用.toggle()方法，

$(this).closest('ul').children('li:gt(2)').toggle();

你能试试吗？

感谢。

使用Jquery截断列表

5 个答案: