0

使用 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 个项目和正确的“查看更多”链接

  • 单击新闻下的查看更多和列表正确展开，但更多和更少的链接都是可见的，单击任何一个链接都会折叠列表，但两个链接都是可见的。

  • 点击文章和列表展开下的查看更多，但只有查看更多链接可见，再次单击它会折叠列表，并且更多链接仍然可见。less 链接永远不会出现。

我在这里做错了什么？

4

4 回答 4

2

可以通过以下方式简化整个事情并消除代码重复：

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()，您可以将 DOM 搜索保持在每个内部隔离UL，因此不需要为每组控件指定不同的处理程序

于 2013-08-05T23:50:43.503 回答
1

现场演示

简化您的 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的另一个解决方案是：

现场演示

.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";
}

问：

$('.news-landing-toggle').click(function(e){
  e.preventDefault();
  $(this).prev('ul').toggleClass('opened');
});
于 2013-08-05T23:55:45.517 回答
0

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

也就是说，当您单击 时view more，您将使用show()，当您单击时，您将view less使用hide()。

此外，当您单击 时view more，您需要链接和链接hide()，反之亦然。Show moreshow()View less

于 2013-08-05T23:44:21.173 回答
0

您永远不会在代码中的适当时间真正隐藏显示更多/显示更少链接。尝试按如下方式更新您的 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();
    });
});

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

于 2013-08-05T23:46:43.647 回答