Question

我有一个包含大量元素的父容器。我需要通过单击位于此容器中的按钮来切换其中一些，这是一个示例

<div class="my-container">
    <a href="/">Home</a>
    <div class="toggle-me visible">1</div>
    <div class="toggle-me hidden">2</div>
    <div>
         <strong>Press me</strong>
         <button class="i-am-toggle">Toggle</button>
    </div>
</div>

请问您可以建议如何按类与按钮的容器一起使用jQuery来切换元素吗？

Answer 1

我就这样做了：

$(".i-am-toggle").click(function(){
    $(".toggle-me").toggle();
});

Here is the JSFiddle demo

Answer 2

试试这段代码......你的意思是这样吗

$('.i-am-toggle').on('click', function(){
  $('.my-container div.toggle-me').toggle();
})

.visible{
  display:block;
}
.hidden{
  display:none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-container">
    <a href="/">Home</a>
    <div class="toggle-me visible" >1</div>
    <div class="toggle-me hidden">2</div>
    <div>
         <strong>Press me</strong>
         <button class="i-am-toggle">Toggle</button>
    </div>
</div>

Answer 3

这样的事情应该让你开始：

$('.i-am-toggle').click(function(){
   $(this).closest('.my-container').find('.toggle-me').toggle();    
});

假设您有多个“my-container”，并且只希望在特定容器中切换visible和hidden类的实例

Answer 4

您可以使用$.parents()方法查找与您的按钮元素相关的父级。尝试这样的事情：

$('.i-am-toggle').click(function(e){
    $(this).parents('.my-container').find('.toggle-me').toggleClass('visible').toggleClass('hidden');        
});

Answer 5

试试这个：

$(".i-am-toggle").
   on("click", function () {
      $(this).parentsUntil("#myContainer")
       .find("div.toggle-me").toggleClass("visible hidden");
});

Fiddle

如何切换父容器

5 个答案: