Закрыть Аккордеон на mouseLeave
Привет и счастливого воскресенья!
Мой клиент запросил этот аккордеон на своем сайте, чтобы показать свои предложения о членстве в баскетбольной академии. Им нравится все в этом, за исключением того факта, что он не закрывается, когда вы убираете мышь. Я нашел код для этого аккордеона в Интернете, и я понятия не имею, как его изменить, чтобы закрыть все разделы, когда пользователь вынимает свою мышь из коробки. Не могли бы вы предложить некоторую помощь или совет, как этого добиться. Заранее спасибо! РЕДАКТИРОВАТЬ: рабочий код находится на machineelite.com/monthly-tuition/
HTML
<div class="accordion">
<div class="accordion-section"><a class="accordion-section-title" href="#accordion-1">Team Membership - $150/month <span style="font-size: 13px;"> (please click for details)</span></a>
<div id="accordion-1" class="accordion-section-content">
<h1><strong>Team Membership - $150/month <a href="http://www.machineelite.com/registration/">Register Now</a> or <a href="http://www.machineelite.com/contact-us/">For More Information</a></strong></h1>
<p><span style="font-size: medium;">Training sessions twice weekly emphasizing individual skills and team development with regular local tournament play. </span><br /><span style="font-size: medium;">· Boys - 3rd through 6th, T/TH 6:00-7:30 </span><br /><span style="font-size: medium;">· Boys - 7th through High School, T/TH 7:30-9:00 </span><br /><span style="font-size: medium;">· Boys - 17U, M/W 7:30-9:00 </span><br /><span style="font-size: medium;">· Girls - 3rd through 6th, M/W 6:00-7:30 </span><br /><span style="font-size: medium;">· Girls - 7th through High School, M/W 7:30-9:00</span> <br /><span style="font-size: medium;">· for an extra $125 (versus full $150 boot camp membership fee) current team members can upgrade to include boot camp membership privileges</span></p>
<div class="pricepic"><img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/michael.jpg?t=1431051039" alt="" /></div>
<div class="pricepic"><img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/zoe.jpg?t=1431051043" alt="" /></div>
<div class="pricepic"><img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/sean.jpg?t=1431051041" alt="" /></div>
<div style="clear: both;"> </div>
</div>
<!--end .accordion-section-content--></div>
<!--end .accordion-section-->
<div class="accordion-section"><a class="accordion-section-title" href="#accordion-2">Extreme Skills Boot Camp Membership - $150/month <span style="font-size: 13px;">(please click for details)</span></a>
<div id="accordion-2" class="accordion-section-content">
<h1><strong>Basic Skills Boot Camp Membership - $150/month <a href="http://www.machineelite.com/registration/">Register Now</a> or <a href="http://www.machineelite.com/contact-us/">For More Information</a></strong> </h1>
<p><span style="font-size: medium;"> · Foundational work and conditioning twice weekly - M/W <span class="aBn" data-term="goog_1898832367"><span class="aQJ">6:00 – 7:30</span></span></span> <br /><span style="font-size: medium;"> · Boot camp membership (for both basic and advanced) is $150, entitles boot camp members to unlimited m/w (6-7:30) sessions for the month --- for an extra $125 (versus full $150 boot camp membership fee) current team members can upgrade to include boot camp membership privileges</span></p>
<h1><strong>Advanced Skills Boot Camp Membership - $150/month <a href="http://www.machineelite.com/registration/">Register Now</a> or <a href="http://www.machineelite.com/contact-us/">For More Information</a></strong> </h1>
<p><span style="font-size: medium;"> · High intensity work and conditioning twice weekly - M/W <span class="aBn" data-term="goog_1898832366"><span class="aQJ">6:00 – 7:30</span></span></span><br /><span style="font-size: medium;"> · Boot camp membership (for both basic and advanced) is $150, entitles boot camp members to unlimited m/w (6-7:30) sessions for the month --- for an extra $125 (versus full $150 boot camp membership fee) current team members can upgrade to include boot camp membership privileges</span></p>
<div class="pricepic"><img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/bootcampleft.jpg?t=1431051034" alt="" /> </div>
<div class="pricepic"><img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/marshaun.jpg?t=1431051037" alt="" /></div>
<div class="pricepic"><img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/bootcampright.jpg?t=1431051035" alt="" /></div>
<div style="clear: both;"> </div>
</div>
<!--end .accordion-section-content--></div>
<!--end .accordion-section-->
<div class="accordion-section"><a class="accordion-section-title" href="#accordion-3">Mini-Machine League Membership - $85/month <span style="font-size: 13px;">(please click for details)</span></a>
<div id="accordion-3" class="accordion-section-content">
<h1><strong>Mini-Machine League Membership - $85/month <a href="http://www.machineelite.com/registration/">Register Now</a> or <a href="http://www.machineelite.com/contact-us/">For More Information</a></strong></h1>
<p><span style="font-size: medium;">1st and 2<sup>nd</sup> grade skills training sessions twice weekly emphasizing individual skills and team development with regular inter-academy league play.</span></p>
<div class="pricepic"><img src="https://cdn6.bigcommerce.com/s- p98jqjm/product_images/uploaded_images/alex.jpg?t=1431051030" alt="" /></div>
<div class="pricepic"><img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/alyssa.jpg?t=1431051032" alt="" /></div>
<div class="pricepic"><img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/1st2nd.jpg?t=1431051029" alt="" /></div>
<div style="clear: both;"> </div>
</div>
<!--end .accordion-section-content--></div>
<!--end .accordion-section--></div>
<!--end .accordion-->
CSS
/*----- Accordion -----*/
.accordion, .accordion * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.accordion {
overflow:hidden;
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
border-radius:3px;
background:#f7f7f7;
}
/*----- Section Titles -----*/
.accordion-section-title {
width:100%;
padding:15px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#333;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
}
.accordion-section-title:hover a {
color: #fff !important;
}
.accordion-section-title > a:focus {
color: #fff !important;
}
.accordion-section-title.active, .accordion-section-title:hover {
background:#c41c22;
/* Type */
text-decoration:none;
}
.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}
/*----- Section Content -----*/
.accordion-section-content {
padding:15px;
display:none;
}
Jquery
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section- content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
// ]]>
</script>
1 ответ
Решение
Я не совсем уверен, что это то, что вам нужно, и у меня нет возможности проверить, работает ли код, поэтому примите его таким, какой он есть.
$(".accordion-section-content").mouseout(function (event) {
if ($(event.target).hasClass("open")) {
close_accordion_section();
}
});
Вот объяснение того, что происходит.
Линия:
- Когда вы наведите курсор мыши на элементы с классом "accordion-section-content", тогда запустите эту функцию...
event.targetэто элемент, который был наведен мышью, поэтому мы помещаем его в оболочку jQuery, чтобы мы могли спросить, имеет ли этот элемент класс "открытый". Если это так, то...- Используйте функцию, которая уже определена:
close_accordion_section, чтобы закрыть в настоящее время открытый аккордеон.
Изменить: Может быть, я должен добавить, что вы должны поставить этот бит между двумя }); и конец вашего скрипта jQuery.
редактировать 2 3:
Если вместо этого вы хотите закрыть аккордеон, оставляя всю коробку, она становится еще чище.
$(".accordion").mouseleave(close_accordion_section);