这是使用 jQuery 显示/隐藏 div 和某个“id”的稳定方法，还是我可以使用更好的方法？

Question

我有两个容器，一个是链接块的页面，另一个是隐藏的容器。在隐藏的容器中有链接到主页链接块的文章。因此用户在主容器中“单击”LINK ONE，然后隐藏主容器，显示最初隐藏的容器并且仅显示它链接到的 id 文章。然后有一个“返回库”按钮，它将带您返回主容器并将所有内容设置回原样。我目前正在使用它，但我不确定这是否是实现此目标的正确方法？我知道没有对错之分，如果它有效，它就有效，但只是想安心。谢谢 ：）CODEPEN：https://codepen.io/mDDDD/pen/ZEObRdRHTML:<div class="container--article-blocks" id="articleBlocks">    <div class="article-block">        <a class="show-article" href="#articleOne">LINK ONE</a>    </div>    <div class="article-block">        <a class="show-article" href="#articleTwo">LINK TWO</a>    </div>    <div class="article-block">        <a class="show-article" href="#articleThree">LINK THREE</a>    </div></div><!-- articles --><div class="container--articles" id="articles" style="display: none;">    <a href="back-to-library" class="back-to-library">back to Library</a>    <div id="articleOne" class="article-block-articles">One</div>    <div id="articleTwo" class="article-block-articles">Two</div>    <div id="articleThree" class="article-block-articles">Three</div></div>查询：$('.show-article').on('click', function (e) {    e.preventDefault();    var id = $(this).attr('href');    $(id).show().siblings('div').hide();         $('#articleBlocks').fadeOut();    setTimeout(function () {      $('#articles').fadeIn();    }, 500);  });  $('.back-to-library').on('click', function (e) {    e.preventDefault();    $('#articles').fadeOut();    setTimeout(function () {      $('#articleBlocks').fadeIn();    }, 500);  });

Answer 1

考虑使用回调 for.fadeOut()然后调用.fadeIn()。您所做的没有错，这只会确保在执行进一步代码之前该项目淡出。

$(function() {

  $('.show-article').on('click', function(e) {

    e.preventDefault();

    var id = $(this).attr('href');

    $(id).show().siblings('div').hide();

    $('#articleBlocks').fadeOut(500, function() {

      $('#articles').fadeIn();

    });

  });

  $('.back-to-library').on('click', function(e) {

    e.preventDefault();

    $('#articles').fadeOut(500, function() {

      $('#articleBlocks').fadeIn();

    });

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container--article-blocks" id="articleBlocks">

  <div class="article-block">

    <a class="show-article" href="#articleOne">LINK ONE</a>

  </div>

  <div class="article-block">

    <a class="show-article" href="#articleTwo">LINK TWO</a>

  </div>

  <div class="article-block">

    <a class="show-article" href="#articleThree">LINK THREE</a>

  </div>

</div>

<!-- articles -->

<div class="container--articles" id="articles" style="display: none;">

  <a href="back-to-library" class="back-to-library">back to Library</a>

  <div id="articleOne" class="article-block-articles">One</div>

  <div id="articleTwo" class="article-block-articles">Two</div>

  <div id="articleThree" class="article-block-articles">Three</div>

</div>

Answer 2

visibility: hidden;您可以在活动结束后 制作！
实际例子
document.getElementById("XXX").style.visibility = "hidden";
但实际上，你的项目很好！