在点击多个 div 时切换 div

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的toggle():

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

Answer 2

使用 Jquery

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

Answer 3

希望这会有所帮助。

这是一个成功的小提琴：https://jsfiddle.net/pqmg1Loq/

如果您单击ABC 之后的按钮，它们将消失。我使用了~选择器，意思是“在这个之后的所有兄弟选择器”，类似于“+”，但选择了所有的选择器。

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

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

希望对您有所帮助。

Answer 4

有一种方法是什么，你必须把所有的slidechild类放到slideone class div中，它靠近slideone class div。

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
 <div class="slideOne"><button>Click Here</button>
<div class="slideChild">A</div>
<div class="slideChild">B</div>
<div class="slideChild">C</div>
<div class="slideChild">D</div>

</div>


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

<div class="slide"><button>Click Here</button>
<div class="slideChild" id="a">E</div>
<div class="slideChild">F</div>
<div class="slideChild">G</div>
<div class="slideChild">H</div>
</div>

<script>
 $(document).on("click","button",function(){
     var parendDIv=$(this).parent('div').attr('class');
     $("."+parendDIv+">.slideChild").toggle();


  });  
</script>