Question

当我点击<div class="col-md-12 lightgray h70 toggle">时，下面的三个div应切换，但不起作用。

的jQuery

$('.toggle').click(function () {
  $(this).find('.expander-child').slideToggle(500);
});

HTML

<div class="col-md-12 lightgray h70 toggle">    
   <span3 class="font16 menuSeparate">Document Name</span3>
   <span3 class="floatright"><i class="arr-up"></i></span3>    
</div>

<div class="col-md-12 lightergray h70 bottomBorder subDiv">
   <span3 class="font16 menuSeparate">Document Name</span3>
   <span3 class="font16 menuSeparate">20 October 2016</span3>
   <span3 class="floatright"><a href="#"><label class="dlButton">Download</label></a></span3>
</div>

<div class="col-md-12 lightergray h70 bottomBorder subDiv">
   <span3 class="font16 menuSeparate">Document Name</span3>
   <span3 class="font16 menuSeparate">20 October 2016</span3>
   <span3 class="floatright"><a href="#"><label class="dlButton">Download</label></a></span3>
</div>

JSFiddle

Answer 1

我不确定这个解决方案是否正是您所期望的，因为我基本上为要隐藏的所有元素添加了一个新类。然后，使用jquery来切换它。

$('.toggle').click(function() {
  $('.x').toggleClass('hide');
});

.hide {
  visibility: hidden;
  /*
  or
  display: none;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 lightgray h70 toggle">

  <span3 class="font16 menuSeparate">Document Name</span3>
  <span3 class="floatright"><i class="arr-up"></i>
  </span3>

</div>

<div class="x col-md-12 lightergray h70 bottomBorder">
  <span3 class="font16 menuSeparate">Document Name</span3>
  <span3 class="font16 menuSeparate">20 October 2016</span3>
  <span3 class="floatright">
    <a href="#">
      <label class="dlButton">Download</label>
    </a>
  </span3>
</div>

<div class="x col-md-12 lightergray h70 bottomBorder">
  <span3 class="font16 menuSeparate">Document Name</span3>
  <span3 class="font16 menuSeparate">20 October 2016</span3>
  <span3 class="floatright">
    <a href="#">
      <label class="dlButton">Download</label>
    </a>
  </span3>
</div>

<div class="x col-md-12 lightergray h70 bottomBorder">
  <span3 class="font16 menuSeparate">Document Name</span3>
  <span3 class="font16 menuSeparate">20 October 2016</span3>
  <span3 class="floatright">
    <a href="#">
      <label class="dlButton">Download</label>
    </a>
  </span3>
</div>

Answer 2

div不在<div class="toggle">内，因此find()不是必需的。使用类subdiv它可以工作。别忘了在<head>中加入jQuery。

＆＃13;

$(".toggle").click(function() {
  $(".subDiv").slideToggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="col-md-12 lightgray h70 toggle">

  <span3 class="font16 menuSeparate">Document Name</span3>
  <span3 class="floatright"><i class="arr-up"></i>
  </span3>

</div>

<div class="col-md-12 lightergray h70 bottomBorder subDiv">
  <span3 class="font16 menuSeparate">Document Name</span3>
  <span3 class="font16 menuSeparate">20 October 2016</span3>
  <span3 class="floatright">
    <a href="#">
      <label class="dlButton">Download</label>
    </a>
  </span3>
</div>

<div class="col-md-12 lightergray h70 bottomBorder subDiv">
  <span3 class="font16 menuSeparate">Document Name</span3>
  <span3 class="font16 menuSeparate">20 October 2016</span3>
  <span3 class="floatright">
    <a href="#">
      <label class="dlButton">Download</label>
    </a>
  </span3>
</div>

＆＃13;

用一个切换多个div

2 个答案: