Footer SlideToggle w Plus/Minus ToggleClass

У меня есть нижний колонтитул, на рабочем столе есть 5 столбцов со ссылками в столбцах 1-4.Footer SlideToggle w Plus/Minus 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

Добавлен немного более простой ответ –

ответ

Смежные вопросы