Hello and happy sunday!
A client of mine requested this accordion for their website to display their different basketball academy membership offerings. They like everything about it, except the fact that it doesn't close when you take the mouse away from it. I found the code for this accordion online and I have no idea how to modify it to make all the sections close when the user takes their mouse out of the boxes. Could you possibly offer some help or advice on how to accomplish this. Thank you in advance! EDIT: the working code is on 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>
答案 0 :(得分：1)
I'm not entirely sure this is what you want, and I have no way to check if the code works, so take it for what it is.
$(".accordion-section-content").mouseout(function (event) {
if ($(event.target).hasClass("open")) {
close_accordion_section();
}
});
Here's an explanation of what's going on.
Line:
event.target is the element that was mouseout'ed, so we put that in a jQuery wrapper, so we can ask if that element has the class "open". If it does then...close_accordion_section, to close the currently open accordion.Edit: Maybe I should add that you should put that bit in between the two }); and the end of your jQuery script.
Edit 2 3:
If you want to close the accordion instead when leaving the entire box, then it gets even cleaner.
$(".accordion").mouseleave(close_accordion_section);