使用 jquery css 隐藏活动并显示一个

Question

我正在尝试创建一个自动隐藏选项，允许用户单击 link 到 reveal/display 项，但我希望能够在用户选择时自动关闭活动显示不同的主题。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   
    $("#myp-0", ).click(function(){
        $("#loose-0").toggle(600);
    });
});
$(document).ready(function(){
   
    $("#myp-1", ).click(function(){
        $("#loose-1").toggle(600);
    });
});
$(document).ready(function(){
   
    $("#myp-2", ).click(function(){
        $("#loose-2").toggle(600);
    });
});
</script>
</head>
<body>
<p id="myp-0">click</p>
<p id="loose-0"> I will disappear.</p>
<p id="myp-1">click</p>
<p id="loose-1"> I will disappear.</p>
<p id="myp-2">click</p>
<p id="loose-2">I will disappear.</p>

</body>
</html>

因此，示例显示 links 显示内容。如何在单击 link 之前隐藏内容，当我点击 link 时显示内容，但进行 jquery 检查是否有其他 link处于活动状态并自动关闭它们？

Answer 1

首先请注意，每页只需要一个 document.ready 事件处理程序。

要简化代码，您可以使用不要重复自己 (DRY) 原则。要实现此位置，请在所有可点击的 p 元素和那些被切换的元素上使用 common 类。然后，您可以使用 DOM 遍历（在本例中为 next()）来查找相关元素并切换它。然后，您可以 select 所有其他与事件无关的元素，并隐藏它们。像这样：

$(function() {
  $('.myp').click(function() {
    var $target = $(this).next('.loose').toggle(600);
    $('.loose').not($target).slideUp(600);
  });
});

p { margin: 0; }
.loose { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="myp">click</p>
<p class="loose">If you click on me, I will disappear.</p>
<p class="myp">click</p>
<p class="loose">If you click on me, I will disappear.</p>
<p class="myp">click</p>
<p class="loose">If you click on me, I will disappear.</p>

Answer 2

您可以使用 hide() 函数，并在准备好文档时将所有内容合并到一个函数中：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $("#loose-0").hide();
    $("#loose-1").hide();
    $("#loose-2").hide();
   
    $("#myp-0", ).click(function(){
        $("#loose-0").toggle(600);
    });

    $("#myp-1", ).click(function(){
        $("#loose-1").toggle(600);
    });

    $("#myp-2", ).click(function(){
        $("#loose-2").toggle(600);
    });

});
</script>
</head>
<body>
<p id="myp-0">click</p>
<p id="loose-0">If you click on me, I will disappear.</p>
<p id="myp-1">click</p>
<p id="loose-1">If you click on me, I will disappear.</p>
<p id="myp-2">click</p>
<p id="loose-2">If you click on me, I will disappear.</p>

</body>
</html>

Answer 3

使用带隐藏方法的通配符和 next to toggle。

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('p[id*="myp"]').click(function() {
        $('p[id*="loose"]').hide();
        $(this).next('p').toggle(600);
      });
    });
  </script>
</head>

<body>
  <p id="myp-0">click</p>
  <p id="loose-0">If you click on me, I will disappear.</p>
  <p id="myp-1">click</p>
  <p id="loose-1">If you click on me, I will disappear.</p>
  <p id="myp-2">click</p>
  <p id="loose-2">If you click on me, I will disappear.</p>

</body>

</html>

Answer 4

它应该可以工作，但可能需要一些更改试试这个

  .hidden{
    display :none;
   }

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){ 
        $("#myp-0,#myp-1,#myp-2").click(function(){
        $('.newCLass').addClass('hidden')
         $(this).next('p').toggleClass('hidden')
        });
    }); 
    });
    </script>
    </head>
    <body>
    <p id="myp-0">click</p>
    <p id="loose-0" class="newCLass">If you click on me, I will disappear.</p>
    <p id="myp-1">click</p>
    <p id="loose-1" class="newCLass">If you click on me, I will disappear.</p>
    <p id="myp-2">click</p>
    <p id="loose-2" class="newCLass">If you click on me, I will disappear.</p>

</body>
</html>

使用 jquery css 隐藏活动并显示一个

hide active and show one using jquery css

html

jquery

hidden