Question

我正在尝试创建一个自动隐藏选项，允许用户点击链接以显示/显示项目，但我希望能够在用户选择其他主题时自动关闭活动显示。

<!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>

因此，该示例显示了显示内容的链接。如何在单击链接之前隐藏内容，当我点击链接，显示内容，但是让jquery检查是否有其他链接处于活动状态并自动关闭它们？

Answer 1

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

为了简化代码，您可以使用不要重复自己（DRY）原则。要实现此目的，请在所有可点击的p元素和要切换的元素上放置公共类。然后，您可以在这种情况下使用DOM遍历next()来查找相关元素并进行切换。然后，您可以选择与事件无关的所有其他元素，并隐藏它们。像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

使用带隐藏方法的通配符和旁边的切换。

<!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 3

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

  .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>

Answer 4

您可以使用hide（）函数，并在文档就绪中将所有函数合并到一起：

＆＃13;

<!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>

＆＃13;

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

4 个答案: