切換div的

Question

我想顯示/隱藏同名

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

以上多個div的示範文本，我不能改變類strucutre或追加任何類，所以對此的任何想法的問題。

我知道我們可以使用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接近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>