Question

使用jQuery在列表中显示/隐藏LI元素有些麻烦，这是我到目前为止所拥有的：

$(document).ready(function(){

    $("ul.news").find("li.hidden").hide();

    $("ul.news a.show").click(function() {
        $("ul.news").find("li.hidden").toggle();
        $("ul.news").find("li.hide").show();
    });

    $("ul.news a.hide").click(function() {
        $("ul.news").find("li.hidden").toggle();
        $("ul.news").find("li.show").show();
    });



    $("ul.articles").find("li.hidden").hide();

    $("ul.articles a.show").click(function() {
        $("ul.articles").find("li.hidden").toggle();
        $("ul.articles").find("li.hide").show();
    });

    $("ul.articles a.hide").click(function() {
        $("ul.articles").find("li.hidden").toggle();
        $("ul.articles").find("li.show").show();
    });
});

HTML：

<h3 class="gray-default">Press Releases</h3>
<ul class="news-landing news span8">
    <li><a href="" target="_blank">xxx</a></li>
    <li><a href="" target="_blank">xxx</a></li>
    <li><a href="" target="_blank">xxx</a></li>
    <li class="hidden"><a href="" target="_blank">xxx</a></li>
    <li class="hidden"><a href="" target="_blank">xxx</a></li>
    <li class="hidden"><a href="" target="_blank">xxx</a></li>
    <li class="hidden"><a href="" target="_blank">xxx</a></li>
    <li class="show"> <a class="view-more show">To view more &gt;&gt;</a> </li>
    <li class="hide"> <a class="view-more hide">To view less &gt;&gt;</a> </li>
</ul>

<h3 class="gray-default">Articles &amp; Reports</h3>
<ul class="news-landing articles span8">
    <li><a href="" target="_blank">xxx</a></li>
    <li><a href="" target="_blank">xxx</a></li>
    <li><a href="" target="_blank">xxx</a></li>
    <li class="hidden"><a href="" target="_blank">xxx</a></li>
    <li class="hidden"><a href="" target="_blank">xxx</a></li>
    <li class="hidden"><a href="" target="_blank">xxx</a></li>
    <li class="hidden"><a href="" target="_blank">xxx</a></li>
    <li class="show"> <a class="view-more show">To view more &gt;&gt;</a> </li>
    <li class="hide"> <a class="view-more hide">To view less &gt;&gt;</a> </li>
</ul>

但是发生了什么：

在初始页面上加载一切正常，每个列表中只有3个项目和正确的“查看更多”链接
点击查看更多新闻＆amp;列表正确扩展，但可以看到越来越多的链接，单击任一链接将折叠列表，但两个链接都可见。
点击查看更多文章＆amp;列表展开，但只有视图更多链接可见，再次单击它会折叠列表，更多链接仍然可见。从不出现的链接越少。

我在这里做错了什么？

Answer 1

可以简化整个过程并删除代码重复：

CSS：

.hidden,li.hide{display:none}

JS：

$(document).ready(function(){

    $('li.show,li.hide').click(function(){
        $(this).toggle().siblings('.hide,.hidden,.show').toggle();      
    });
})

DEMO

通过使用siblings()，您可以在每个UL内隔离DOM搜索，因此无需为每组控件指定不同的处理程序

Answer 2

<强> LIVE DEMO

简化您的HTML

<h3 class="gray-default">Press Releases</h3>
<ul class="news-landing span8">
    <li><a href="" target="_blank">xxx0</a></li>
    <li><a href="" target="_blank">xxx1</a></li>
    <li><a href="" target="_blank">xxx2</a></li>
    <li><a href="" target="_blank">xxx3</a></li>
    <li><a href="" target="_blank">xxx4</a></li>
    <li><a href="" target="_blank">xxx5</a></li>
    <li><a href="" target="_blank">xxx6</a></li>
</ul>
<a href="#" class="news-landing-toggle"></a>

这是你超级简单的jQuery：

$(function(){ // DOM ready

  var btnTxt = ["View more", "View less"];
  $('.news-landing').find('li:gt(2)').hide();

  $(".news-landing-toggle").click(function( e ) {

      e.preventDefault();
      $(this).text( btnTxt.reverse()[0] ).prev('ul').find('li:gt(2)').slideToggle();    

  }).text( btnTxt[0] );

});

使用更多 CSS 的另一种解决方案是：

<强> LIVE DEMO

.news-landing li:nth-child(n+4){
  display:none;
}
.news-landing + .news-landing-toggle:after{
  content:"View more";
}
.news-landing.opened li:nth-child(n+4){
  display:inherit;
}
.news-landing.opened + .news-landing-toggle:after{
  content:"View Less";
}

JQ：

$('.news-landing-toggle').click(function(e){
  e.preventDefault();
  $(this).prev('ul').toggleClass('opened');
});

Answer 3

如果我理解正确，您不想使用toggle()和show()而不是hide()吗？

也就是说，当您点击查看更多时，您将使用show()，当您点击查看更少时，您会使用hide()。

此外，当您点击查看更多时，您需要hide() 显示更多链接和show() 查看更少< / kbd> link，反之亦然。

Answer 4

您实际上从未在代码中的适当时间实际隐藏节目/显示较少的链接。尝试更新您的JavaScript，如下所示（请参阅fiddle）：

$(document).ready(function(){

    $("ul.news").find("li.hidden").hide();
    $("ul.news").find("li.hide").hide(); // hide the hide button by default

    $("ul.news li.show").click(function() {
        $(this).hide(); // hide the show button
        $("ul.news").find("li.hidden").toggle();
        $("ul.news").find("li.hide").show(); // and show the hide button
    });

    $("ul.news li.hide").click(function() {
        $(this).hide(); // hide the hide button 
        $("ul.news").find("li.hidden").toggle();
        $("ul.news").find("li.show").show(); // and show the show button
    });



    $("ul.articles").find("li.hidden").hide();
    $("ul.articles").find("li.hide").hide();

    $("ul.articles li.show").click(function() {
        $(this).hide();
        $("ul.articles").find("li.hidden").toggle();
        $("ul.articles").find("li.hide").show();
    });

    $("ul.articles li.hide").click(function() {
        $(this).hide();
        $("ul.articles").find("li.hidden").toggle();
        $("ul.articles").find("li.show").show();
    });
});

你可以重构这个以避免代码重复，但我认为这可能是一个好的开始。

jQuery show / hide表现不如预期

4 个答案: