[英]jquery accordion mouseover and mouseout on navigation of vertical menu
[英]mouseover and mouseout in accordion
我正在使用手風琴進行導航,並且正在使用jquery。 我的問題是,當頁面加載時,默認情況下應關閉所有頁眉,當我將鼠標懸停在任何頁眉上時,其同級將打開,而當我將鼠標移出時,其頁眉將自動關閉。
<ul id="accordion">
<li>
<a href="#" class="history_heading" rel="history_heading">HISTORY</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li>
<a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
</ul>
請幫我
下面給出的jQuery代碼是供click函數使用的,但我想根據自己的要求
jQuery代碼
$(document).ready(function () {
$('#accordion li').children('ul').hide();
$('.history_heading').parent().addClass('active').find('ul').show();
$('#accordion a').click(function () {
$(this).parent().siblings('.active').removeClass('active').find('ul').slideUp('fast');
if ($(this).parent().hasClass('active')) {
$(this).next('ul').slideUp('fast');
$(this).parent().removeClass('active');
} else {
$(this).next('ul').slideDown('fast');
$(this).parent().addClass('active');
}
});
});
簡單
jQuery(function ($) {
$('#accordion li').hover(function () {
$(this).find('ul').stop(true, true).slideDown()
}, function () {
$(this).find('ul').stop(true, true).slideUp()
}).find('ul').hide()
})
演示: 小提琴
要么
jQuery(function ($) {
$('#accordion li').hover(function () {
$(this).find('ul').stop(true, true).slideToggle()
}).find('ul').hide()
})
$('#accordion > li').each(function(){
var accHolder = $(this),
acc = accHolder.find('> ul');
accHolder.hover(function(){
acc.slideDown();
}, function(){
acc.slideUp();
});
});
您好為您張貼了一個小提琴,希望對您有所幫助... http://jsbin.com/aKIpEZu/2/edit
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.