你好，星期天快乐!
我的一个客户要求在他们的网站上使用这种 Accordion 来展示他们不同的篮球学院成员(member)服务。他们喜欢它的一切，除了当您将鼠标从它移开时它不会关闭这一事实。我在网上找到了这个 Accordion 的代码，但我不知道如何修改它以在用户将鼠标从盒子中取出时关闭所有部分。您能否就如何完成此任务提供一些帮助或建议。先感谢您! 编辑:工作代码位于 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>
最佳答案
我不完全确定这就是您想要的，而且我无法检查代码是否有效，所以请按原样使用。
$(".accordion-section-content").mouseout(function (event) {
if ($(event.target).hasClass("open")) {
close_accordion_section();
}
});
这是对正在发生的事情的解释。
线路:
- 当您鼠标移到具有“accordion-section-content”类的元素上时，然后运行此函数...
event.target是被鼠标移出的元素，因此我们将它放在 jQuery 包装器中，这样我们就可以询问该元素是否具有“open”类。如果是的话……- 使用已经定义的函数:
close_accordion_section，关闭当前打开的 Accordion 。
编辑:也许我应该补充一点，你应该把那个位放在两个 }); 和你的 jQuery 脚本的结尾之间。
编辑2 3:
如果您想在离开整个盒子时关闭 Accordion ，那么它会变得更干净。
$(".accordion").mouseleave(close_accordion_section);
关于jquery - 在 mouseLeave 上关闭 Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30428008/