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

Question

我有两个容器，一个是链接块的页面，另一个是隐藏的容器。在隐藏的容器中有链接到主页链接块的文章。因此用户在主容器中“单击”LINK ONE，然后隐藏主容器，显示最初隐藏的容器并且仅显示它链接到的 id 文章。然后有一个“返回库”按钮，它将带您返回主容器并将所有内容设置回原样。我目前正在使用它，但我不确定这是否是实现此目标的正确方法？我知道没有对错之分，如果它有效，它就有效，但只是想安心。谢谢 ：）

CODEPEN：https://codepen.io/mDDDD/pen/ZEObRdR

HTML:

<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() {&nbsp; $('.show-article').on('click', function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; var id = $(this).attr('href');&nbsp; &nbsp; $(id).show().siblings('div').hide();&nbsp; &nbsp; $('#articleBlocks').fadeOut(500, function() {&nbsp; &nbsp; &nbsp; $('#articles').fadeIn();&nbsp; &nbsp; });&nbsp; });&nbsp; $('.back-to-library').on('click', function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; $('#articles').fadeOut(500, function() {&nbsp; &nbsp; &nbsp; $('#articleBlocks').fadeIn();&nbsp; &nbsp; });&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container--article-blocks" id="articleBlocks">&nbsp; <div class="article-block">&nbsp; &nbsp; <a class="show-article" href="#articleOne">LINK ONE</a>&nbsp; </div>&nbsp; <div class="article-block">&nbsp; &nbsp; <a class="show-article" href="#articleTwo">LINK TWO</a>&nbsp; </div>&nbsp; <div class="article-block">&nbsp; &nbsp; <a class="show-article" href="#articleThree">LINK THREE</a>&nbsp; </div></div><!-- articles --><div class="container--articles" id="articles" style="display: none;">&nbsp; <a href="back-to-library" class="back-to-library">back to Library</a>&nbsp; <div id="articleOne" class="article-block-articles">One</div>&nbsp; <div id="articleTwo" class="article-block-articles">Two</div>&nbsp; <div id="articleThree" class="article-block-articles">Three</div></div>

Answer 2

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