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

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

答案归结为id是单数。 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');
});

工作演示

Answer 3

尝试以下代码，将id替换为类use find()来查找相对于手风琴切换的元素

   $('.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>