jquery 如何切换显示：无，显示：块

az31mfrm 于 2023-02-11 发布在 jQuery

关注(0)|答案(9)|浏览(113)

$(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子容器最初显示，第二个div子容器隐藏/display：none。单击按钮时，第二个div子容器显示，display：none更改为display：block。此处的代码似乎不起作用。

jquery

来源：https://stackoverflow.com/questions/48314162/how-to-toggle-displaynone-displayblock

9条答案

按热度按时间

vql8enpb1#

使用.siblings()
给定一个表示一组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>

赞(0）回复(0）举报 2023-02-11

cgh8pdjw2#

使用parent()查找当前按钮单击元素，然后在该容器中查找.item类，只需使用fadeToggle() * 隐藏 * 和 * 显示 * 元素，如下所示。

$(document).ready(function(){
    $('.button').click(function(){
        $(this).parent().find(".item").fadeToggle();
    });
});

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

赞(0）回复(0）举报 2023-02-11

sigwle7e3#

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

赞(0）回复(0）举报 2023-02-11

qq24tv8q4#

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

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

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

赞(0）回复(0）举报 2023-02-11

yrwegjxp5#

您可以只触发.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>

赞(0）回复(0）举报 2023-02-11

zf9nrax16#

您的代码有一些错误，如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();
});

});

赞(0）回复(0）举报 2023-02-11

xoefb8l87#

使用切换

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

赞(0）回复(0）举报 2023-02-11

agyaoht78#

jQuery排毒，纯Javascript摇滚。

document.querySelector('button.button').onclick = function() {
    let item = document.querySelector('div.item');
    (getComputedStyle(item).display === 'none') ? item.style.display = 'block' : item.style.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>

赞(0）回复(0）举报 2023-02-11

a2mppw5e9#

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

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

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

赞(0）回复(0）举报 2023-02-11

我来回答

jquery 如何切换显示：无，显示：块

9条答案

相关问题

热门标签

最新问答