Question

$(document).ready(function() {
  ('.button').click(function() {
    let item = $(this).closest('item');
    if (item.css.('display') === 'none') {
      item.show();
      item.css('display', 'block');
    } else if (item.css.('display') === 'block') {
      item.hide();
      item.css('display', 'none');
    }
  });
});

.item {
  display: none;
}

<div class="container">
  <button class="button">Click</button>
  <div class="front">front page</div>
  <div class="item">
    This is a paragraph with little content. This is another small paragraph.
  </div>
</div>

目标是隐藏并显示按钮点击时的当前div。我有相同的容器具有相同的类名。如果我只使用切换按钮，在单击按钮时，每个其他容器都会切换。在这种情况下，只有当前容器必须显示和隐藏。初始显示类容器的第一个div子节点，隐藏/ display：none的第二个div子节点。单击按钮后，将显示第二个div子节点，显示：none将更改为display：block。这里的代码似乎不起作用。

Answer 1

使用mq-connector

给定一个表示一组DOM元素的jQuery对象， .siblings（）方法允许我们搜索这些兄弟姐妹 DOM树中的元素并从中构造一个新的jQuery对象匹配元素。

工作代码段： -

$(document).ready(function() {
  $('.button').click(function() {
    $(this).siblings(".item").toggle();
  });
});

.item {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="button">Click</button>
  <div class="front">front page</div>
  <div class="item">
    This is a paragraph with little content. This is another small paragraph.
  </div>
</div>

Answer 2

使用parent()查找当前按钮点击元素，然后在该容器中找到.item类，只需使用fadeToggle() 隐藏和 show < / em>元素如下。

＆＃13;
＆＃13;
$(document).ready(function(){ $('.button').click(function(){ $(this).parent().find(".item").fadeToggle(); }); });
＆＃13;
.item{display:none;}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <button class="button">Click</button> <div class="front">front page</div> <div class="item"> This is a paragraph with little content. This is another small paragraph. </div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您可以使用jquery切换方法切换垃圾。

＆＃13;

setInterval(()=>$("h1").toggle(), 50);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>hello</h1>

＆＃13;

Answer 4

您需要使用$(this).parent().find(":not(.button)")，以便切换容器内除按钮以外的所有内容：

＆＃13;

$(document).ready(function() {
  $('.button').click(function() {
    $(this).parent().find(":not(.button)").toggle();
  });
});

＆＃13;

.front,
.item {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="button">Click</button>
  <div class="front">front page</div>
  <div class="item">
    This is a paragraph with little content. This is another small paragraph.
  </div>
</div>

＆＃13;

Answer 5

您可以触发.toggle()，.slideToggle()或.fadeToggle()功能，而不是检查可见性，我会使用.siblings('.item').first()根据您找到相应的元素你的HTML和原始的js代码。

$('.button').click(function() {
  let item = $(this).siblings('.item').first();
  item.slideToggle();
});

.item {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="button">Click</button>
  <div class="front">front page</div>
  <div class="item hidden">
    This is a paragraph with little content. This is another small paragraph.
  </div>
</div>

Answer 6

您的代码有一些错误，例如css.("display")不是像JQuery中的任何函数。

您可以使用这种方式解决问题，

$(function(){

$('.button').on("click",function(){

var item = $(this).next("div").next('.item'); // For second next
 //var item = $(this).siblings('.item'); // By siblings() function
//var item = $(this).next().closest('.item'); // By siblings() function
item.toggle();
});

});

Answer 7

使用切换

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div.item").toggle(1000);
    });
});
</script>
<style>.item {
  display: none;
 }</style>
</head>
<body>

<div class="container"> 
   
<button>Hide</button>
    <div class="front">front page</div> 
    <div class="item">
        This is a paragraph with little content.
        This is another small paragraph.
    </div>
</div>

</body>
</html>

Answer 8

<script>
$(document).ready(function(){
    $(".button").click(function(){
        $(".front").toggle();
        $(".item").toggle();
    });
});
</script>
<style type="text/css">
    .item{display: none;}
</style>
<button class="button">Click</button> 
<div class="front">front page</div> 
<div class="item">
    This is a paragraph with little content.
    This is another small paragraph.
</div>

如何切换显示：无，显示：阻止

8 个答案: