页脚SlideToggle w加号/减号ToggleClass

我有一个页脚，在桌面视图中，有5列与1-4列链接。页脚SlideToggle w加号/减号ToggleClass

在移动视图中，前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/

来源

2016-09-16 Amy Ling

你可以创建一个小提琴或代码片段？ –

谢谢达伦！这工作！我知道它必须简单，但我无法弄清楚。我也不写js/jquery。 –

失败...现在看 - 点击相同的元素两次，你会明白我的意思 –

稍微简单的方式比你的答案 - 你不需要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; 
    });

来源

2016-09-16 21:41:53

随着达伦的代码的帮助下，加入这个和它的工作：

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

JSFiddle已更新。

来源

2016-09-16 21:39:50

添加了一个更简单的答案 –

页脚SlideToggle w加号/减号ToggleClass

回答

相关问题