jQuery显示/隐藏未按预期运行

jQuery show/hide not behaving as expected

本文关键字：运行 显示 隐藏 jQuery      更新时间：2023-09-26

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

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

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

我做错了什么？

可以简化整个过程并使用消除代码重复

CSS：

.hidden,li.hide{display:none}

JS:

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

演示

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

现场演示

简化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";
}

jQ:

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

您永远不会在代码中的适当时间隐藏showmore/showless链接。尝试更新您的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();
    });
});

您可以对此进行重构以避免代码重复，但我认为这可能是一个良好的开端。

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

也就是说，当您单击查看更多时，您将使用show()，而当您单击view less

此外，当您单击查看更多时，需要hide()显示更多链接，show()查看更少

相关文章：