Question

我想显示/隐藏多个同名的div

<div class="slide"><button>Click Here</button></div>
<div class="slideChild"></div>
<div class="slideChild"></div>
<div class="slideChild"></div>
<div class="slideChild"></div>


<div class="some content">ABC</div>

<div class="slide"><button>Click Here</button></div>
<div class="slideChild"></div>
<div class="slideChild"></div>
<div class="slideChild"></div>
<div class="slideChild"></div>

以上是示例文本，我无法更改类结构或附加任何类，因此对此问题有任何想法。

我知道我们可以在按钮事件触发时使用jquery切换，但它会滑动所有div，所以我必须使用其他最接近的东西。

  $("body").on("click","button",function(){
         $('.slideChild').toggle();
  });

Answer 1

您可以使用Jquery＆＃39; toggle()：

$( ".slideChild" ).toggle();

Answer 2

使用Jquery

$('.slideone button').click(function(){
    $(".slideChild").toggle();
});

Answer 3

希望这会有所帮助。

这是一个半工作的小提琴：https://jsfiddle.net/pqmg1Loq/

如果您在ABC之后点击按钮，它们就会消失。我使用了~选择器，这意味着“在此之后的所有兄弟选择器”，类似于“+”，但选择所有这些选择器。

ABC之前按钮的问题在于，相同的方法会隐藏所有元素，因为所有元素都跟随它。

当点击第一个按钮时，解决方案是创建一个包含所有.slideChild元素的数组，然后遍历它并隐藏元素，直到找到{{1元素。

希望有所帮助。

Answer 4

有一种方法是什么，你必须将所有的slidechild类放入与slideone类div接近的slideone类div中。

height = 300

使用多个div点击切换div

4 个答案: