jQuery ,Css 显示无块与隐藏显示答案

【问题标题】：jQuery ,Css display none - block vs. hide- showjQuery ,Css 显示无块与隐藏显示
【发布时间】：2020-09-21 08:45:19
【问题描述】：

我正在尝试隐藏 #showMyList、#showMyName 这些 div。单击按钮需要显示 div。两个 div 都有单独的按钮。我想一次看到一个 div。我可以给他们不同的css（风格），让他们看起来不同。

jQuery hide() 和 show() 哪个更有用还是不显示并阻止？

#showMyList, #showMyName{
            height: 100px;
            width: 500px;
            text-align: center;
            border: 1px solid gray;
            background-color: antiquewhite;
            position: absolute;
            top: 200px;
            left:200px;
        }
    </style> 
    <script>
        $('document').ready(function(){
           $('showMyList').css("display", "none");
            $('showMyAcc').css("display","none");
            $("myList").click(function(){
                $("showMyList").css("display", "block");
                $("myAcc").click(function(){
                  $("showMyAcc").css("display", "block");  
                });
            });
        });

【问题讨论】：

hide() 和 show() 优于使用 css()。 addClass() 和 removeClass() 也是比使用 css() 更好的做法
.css() 和 .hide() / .show() 都简单地添加到元素样式属性中。因此，最初设置 CSS 然后使用 JS 显示其中一个不会有问题。我在这里看到的问题是有一个 click 事件嵌套在另一个点击事件中。
您还有严重的选择器问题。

标签： javascript jquery css hide display

【解决方案1】：

考虑以下示例。

$(function() {
  $('#showMyList, #showMyAcc').hide();
  $("#myList").click(function() {
    $("#showMyAcc").hide();
    $("#showMyList").show();
  });
  $("#myAcc").click(function() {
    $("#showMyList").hide();
    $("#showMyAcc").show();
  });
});

#showMyList,
#showMyAcc {
  height: 100px;
  width: 500px;
  text-align: center;
  border: 1px solid gray;
  background-color: antiquewhite;
  position: absolute;
  top: 200px;
  left: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myList">Show List</button>
<button id="myAcc">Show Name</button>
<div id="showMyList">List</div>
<div id="showMyAcc">Name</div>

您可以隐藏两个元素，然后一次显示或显示 1 个。

【讨论】：