Question

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

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

我得到了它，因此在移动视图中，+类被添加到每个h3。单击时，它切换到 - 。但是，当他们点击不同的h3时，我无法回到+。只有当用户点击已经打开的同一个h3然后它返回+类时它才有效。

这是我的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

2 个答案: