Question

我很难让我的代码适用于每个选择器。我用开放的CSS动画制作了2部手风琴。问题在于第二个手风琴不起作用，并且动画对两种手风琴都不起作用。以下是我的来源：JSFIDDLE

这是使用

的jQuery

    $('#accordion').find('.accordion-toggle').click(function() {

  //Expand or collapse this panel
  $(this).next().slideToggle('slow');

  //Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp('fast');

  if ($('img').hasClass('moved')) {
    $('img').removeClass('moved');
  } else {
    $('img').addClass('moved');
  }
});

Answer 1

答案归结为ids是单数的。您不能拥有多个带id的元素。因此，当您选择$('#accordion')时，它将返回具有该ID的第一个元素。

将其更改为班级。现在您还需要更改代码，以便在手风琴内部寻找图像而不是所有图像。

所以将id="accordion"更改为class="accordion"

并做这样的事情

$('.accordion').find('.accordion-toggle').click(function() {

  var panel = $(this).next();
  //Expand or collapse this panel
  panel.slideToggle('slow');

  //Hide the other panels
  $(".accordion-content").not(panel).slideUp('fast').parent().find("img").removeClass("moved");
  
  var img = $(this).find('img').toggleClass("moved");
 });

.accordion-toggle:hover{
  cursor:pointer;
}
img {
  width: 30px;
  position: absolute;
  transition: all 1s;
}

.openclose {
  text-align: center;
  position: relative;
  margin: 30px;
}

.moved {
  left: calc(50% - 15px) !important;
  top: 50% !important;
  transform: rotate(630deg) !important;
}
.container{
background: grey;
border-radius: 20px;
padding: 30px 0;
width: calc(100% - 30px);
margin: auto;
}
.accordion-content{
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="accordion">
    <div class="accordion-toggle">
      <div class="openclose">
        <p class="resp-p man">I am working fine :)</p>
        <img style="transform: rotate(-90deg); left: calc(50% - 15px); top: calc(100% + 30px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
        <img style="top: calc(50% - 15px); transform: rotate(180deg); left: 100%;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
        <img style="left: -30px; top: calc(50% - 15px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
        <img style="transform: rotate(90deg); left: calc(50% - 15px); top: -60px;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
      </div>
    </div>
    <div style="display: none;" class="accordion-content default">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</p>
    </div>
  </div>
</div>
<br>
<div style="text-align:center">Lots of ocntent between</div>
<br>
<div class="container">
  <div class="accordion">
    <div class="accordion-toggle">
      <div class="openclose">
        <p class="resp-p man">I dont work :(</p>
        <img style="transform: rotate(-90deg); left: calc(50% - 15px); top: calc(100% + 30px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
        <img style="top: calc(50% - 15px); transform: rotate(180deg); left: 100%;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
        <img style="left: -30px; top: calc(50% - 15px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
        <img style="transform: rotate(90deg); left: calc(50% - 15px); top: -60px;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
      </div>
    </div>
    <div style="display: none;" class="accordion-content default">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</p>
    </div>
  </div>
</div>

Answer 2

您对两个元素使用相同的ID。由于哪个id选择器只选择第一个匹配元素而不是所有具有相同id的元素。您可以使用容器div中的类选择器。

您还需要在当前单击的元素容器中定位图像元素以使其工作。您可以使用toggleClass)_而不是检查类存在和切换类来使代码更清晰：

$('.container').find('.accordion-toggle').click(function() {
 var _this = $(this);
 //Expand or collapse this panel
  _this.next().slideToggle('slow');
 //Hide the other panels
  $(".accordion-content").not(_this.next()).slideUp('fast');
  _this.find('img').toggleClass('moved');
});

<强> Working Demo

Answer 3

尝试以下代码，使用类find()替换id以查找与accordion-toggle相关的元素

   $('.accordion').find('.accordion-toggle').click(function() {

  //Expand or collapse this panel
  $(this).next('.accordion-content').slideToggle('slow');

  //Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp('fast');//slide up all acordeons except this one
   $('img').not($(this).find('img')).removeClass('moved');//remove all moved classes exept for the current clicked one

    $(this).find('img').toggleClass('moved');// toggle the current class

});

演示：https://jsfiddle.net/03r1vmfv/2/

$('.accordion').find('.accordion-toggle').click(function() {

  //Expand or collapse this panel
  $(this).next().slideToggle('slow');

  //Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp('fast');
  $('img').not($(this).find('img')).removeClass('moved');

  $(this).find('img').toggleClass('moved');

});

.accordion-toggle:hover {
  cursor: pointer;
}
img {
  width: 30px;
  position: absolute;
  transition: all 1s;
}
.openclose {
  text-align: center;
  position: relative;
  margin: 30px;
}
.moved {
  left: calc(50% - 15px) !important;
  top: 50% !important;
  transform: rotate(630deg) !important;
}
.container {
  background: grey;
  border-radius: 20px;
  padding: 30px 0;
  width: calc(100% - 30px);
  margin: auto;
}
.accordion-content {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="accordion">
    <div class="accordion-toggle">
      <div class="openclose">
        <p class="resp-p man">I am working fine :)</p>
        <img style="transform: rotate(-90deg); left: calc(50% - 15px); top: calc(100% + 30px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
        <img style="top: calc(50% - 15px); transform: rotate(180deg); left: 100%;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
        <img style="left: -30px; top: calc(50% - 15px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
        <img style="transform: rotate(90deg); left: calc(50% - 15px); top: -60px;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
      </div>
    </div>
    <div style="display: none;" class="accordion-content default">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>
  </div>
</div>
<br>
<div style="text-align:center">Lots of ocntent between</div>
<br>
<div class="container">
  <div class="accordion">
    <div class="accordion-toggle">
      <div class="openclose">
        <p class="resp-p man">I dont work :(</p>
        <img style="transform: rotate(-90deg); left: calc(50% - 15px); top: calc(100% + 30px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
        <img style="top: calc(50% - 15px); transform: rotate(180deg); left: 100%;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
        <img style="left: -30px; top: calc(50% - 15px);" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
        <img style="transform: rotate(90deg); left: calc(50% - 15px); top: -60px;" src="http://simpleicon.com/wp-content/uploads/arrow-18.png">
      </div>
    </div>
    <div style="display: none;" class="accordion-content default">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>
  </div>
</div>

jQuery函数不适用于每个选择器

3 个答案: