1

我正在使用手风琴进行导航，并且正在使用 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 代码用于点击功能，但我希望按照我的要求
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');
        }

    });




});
4

3 回答 3

2

简单的

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()
})
于 2013-09-25T09:36:41.230 回答
0 
$('#accordion > li').each(function(){
    var accHolder = $(this),
        acc = accHolder.find('> ul');

    accHolder.hover(function(){
        acc.slideDown();
    }, function(){
        acc.slideUp();
    });
});
于 2013-09-25T09:35:05.637 回答
0

您好为您发布了一个小提琴，希望对您有所帮助... http://jsbin.com/aKIpEZu/2/edit

于 2013-09-25T09:40:58.890 回答