Question

我正在尝试在一个嵌套在另一个div中的div上使用slideToggle函数，但我有50个不同的div组就是这样

<div id="parent">
 #code...
<div id="child">
 #code...
</div>
</div>

我想要的是一种避免编写50种不同的slidetoggle功能的方法。任何帮助将不胜感激。

Answer 1

由于jQuery从Selector Object创建了一个元素Array，你需要引用触发你的函数事件的this精确元素，而不是你可以选择其他（子）选择器

_{P.S：不要使用重复的ID，而是使用Class Selectors：}

$('.parent').on("yourEventHere", function(){

    $(this).find('.child').doSomething(); // or use:
    $('.child', this).doSomething();      // ".child", children of this

});

一个实际的例子是：

<div class="parent">
   1code...
   <div class="child">1code...</div>
</div>
<div class="parent">
   2code...
   <div class="child">2code...</div>
</div>
<div class="parent">
   3code...
   <div class="child">3code...</div>
</div>

$(".child").hide(); // Hide all children
$('.parent').on("click", function(){
    $('.child', this).toggle();
});

或使用.find()：

$(".child").hide(); // Hide all children
$('.parent').hover(function(){
    $(this).find('.child').fadeToggle();  
});

Answer 2

你可以这样做，不要使用id使用类来重复这样的函数：）

$('.parent').on('click', function() {
  $(this).find('.child').slideToggle();
});

// To prevent slide toggle if you click inside the child element
$('.child').on('click', function(e) {
  return false;
});

.child {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="parent">
  #code...parent
  <div class="child">
    #code...child
  </div>
</div>

<div class="parent">
  #code...parent
  <div class="child">
    #code...child
  </div>
</div>

<div class="parent">
  #code...parent
  <div class="child">
    #code...child
  </div>
</div>

<div class="parent">
  #code...parent
  <div class="child">
    #code...child
  </div>
</div>
<div class="parent">
  #code...parent
  <div class="child">
    #code...child
  </div>
</div>

<div class="parent">
  #code...parent
  <div class="child">
    #code...child
  </div>
</div>

<div class="parent">
  #code...parent
  <div class="child">
    #code...child
  </div>
</div>

<div class="parent">
  #code...parent
  <div class="child">
    #code...child
  </div>
</div>
<div class="parent">
  #code...parent
  <div class="child">
    #code...child
  </div>
</div>

<div class="parent">
  #code...parent
  <div class="child">
    #code...child
  </div>
</div>

<div class="parent">
  #code...parent
  <div class="child">
    #code...child
  </div>
</div>

<div class="parent">
  #code...parent
  <div class="child">
    #code...child
  </div>
</div>

JQuery slideToggle有50个div

2 个答案: