页脚 SlideToggle w Plus/Minus ToggleClass

Question

我有一个页脚，在桌面视图中，有 5 列在第 1-4 列中有链接。

在移动视图中，前 4 列变得像手风琴一样。当你点击h3时，ul向下滑动。

我明白了，因此在移动视图中，+ class 被添加到每个 h3。单击时，它会切换到 -。但是，当他们单击不同的 h3 时，我无法让它返回到 +。它仅在用户单击已打开的同一个 h3 然后返回到 + class.

时才有效

这是我的 jQuery

jQuery(".footer-blocks > div:not(:last-child) h3").append("<span class='slide-toggle-close float-right transition-all'></span>");

// accordion for footer block links
jQuery(".footer-blocks > div:not(:last-child) h3").click(function(){
   jQuery(this).find(".slide-toggle-close").toggleClass("slide-toggle-open");
   jQuery(this).next("ul").slideToggle();
   jQuery(this).parent().siblings().not(".block-column-5").children().next().slideUp();
   return false;
});

这是我的 html

<div class="footer-blocks transition-all">
<div class="block-column-1 transition-all"><h3>Equipment</h3>
   <ul>
      <li><a href="#" target="_blank">Download Catalog (PDF)</a></li>
      <li><a href="#">Request Print Catalog</a></li>
      <li><a href="#">Rental Equipments</a></li>
      <li><a href="#">New &amp; Used Equipments</a></li>
      <li><a href="#">Equipment Parts</a></li>
      <li><a href="#">Credit Application</a></li>
      <li><a href="#">Financing</a></li>
   </ul>
</div>
<div class="block-column-2 transition-all"><h3>Support</h3>
   <ul>
      <li><a href="#">Customer Support</a></li>
      <li><a href="#">Service &amp; Maintenance</a></li>
      <li><a href="#">Safety Training</a></li>
   </ul>
</div>
<div class="block-column-3 transition-all"><h3>Company</h3>
   <ul>
      <li><a href="#">About Ahern</a></li>
      <li><a href="#">Company History</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Investor Relations</a></li>
   </ul>
</div>
<div class="block-column-4 transition-all"><h3>Contact</h3>
   <ul>
      <li><i class="fa fa-envelope"></i> <a href="#">Email Us</a></li>
      <li><i class="fa fa-comments-o"></i> <a href="#">Live Chat</a></li>
      <li><i class="fa fa-phone"></i> <a href="#">Call Me</a></li>
      <li><i class="fa fa-map-marker"></i> <a href="#">Find a Location</a></li>
      <li><i class="fa fa-wrench"></i> <a href="#">Schedule a Service</a></li>
   </ul>
</div>

https://jsfiddle.net/xxaimsxx/8dL5ufm8/

Answer 1

在 Darren 的代码的帮助下，添加了这个并且成功了：

jQuery(this).parent().siblings().children().find(".slide-toggle-close").removeClass("slide-toggle-open"); // have to get rid of all +

JSFiddle 已更新。

Answer 2

比您的答案稍微简单的方法 - 您不需要 children() 选择器，因为您已经使用 find():

研究了它们

jQuery(".footer-blocks > div:not(:last-child) h3").click(function(){
        jQuery(this).parent().siblings().find(".slide-toggle-close").removeClass("slide-toggle-open");
        jQuery(this).find(".slide-toggle-close").toggleClass("slide-toggle-open");
        jQuery(this).next("ul").slideToggle();
        jQuery(this).parent().siblings().not(".block-column-5").children().next().slideUp();
        return false;
    });

页脚 SlideToggle w Plus/Minus ToggleClass

Footer SlideToggle w Plus/Minus ToggleClass

jquery

accordion

slidetoggle

toggleclass