Question

我正在使用jQueryUI演示示例，我正在尝试在开放时添加鼠标悬停效果，并在开始时关闭所有li。但出于某种原因，它只是默认1折叠并单击以折叠 http://jqueryui.com/demos/accordion/#mouseover

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){

                // Accordion
                $("#accordion").accordion({ header: "h3" });
            $("#accordion").accordion({ event: "mouseover" });                  
                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); }, 
                    function() { $(this).removeClass('ui-state-hover'); }
                );

            });
        </script>
        <style type="text/css">
            /*demo page css*/
            body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
            .demoHeaders { margin-top: 2em; }
            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
            ul#icons {margin: 0; padding: 0;}
            ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
            ul#icons span.ui-icon {float: left; margin: 0 4px;}
        </style>    
    </head>
    <body>

        <!-- Accordion -->
        <h2 class="demoHeaders">Accordion</h2>
        <div id="accordion">
            <div>
                <h3><a href="#">First</a></h3>
                <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
            </div>
            <div>
                <h3><a href="#">Second</a></h3>
                <div>Phasellus mattis tincidunt nibh.</div>
            </div>
            <div>
                <h3><a href="#">Third</a></h3>
                <div>Nam dui erat, auctor a, dignissim quis.</div>
            </div>
        </div>




    </body>
</html>

Answer 1

您有两次初始化手风琴的电话：

$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ event: "mouseover" });

这就是mouseover效果不起作用的原因。将选项组合成一个初始化调用：

$("#accordion").accordion({ header: "h3", event: "mouseover" });

此外，如果您希望最初折叠所有部分，请添加active选项并将其设置为false：

$("#accordion").accordion({
    header: "h3",
    event: "mouseover",
    active: false
});

以下是一个有效的例子：http://jsfiddle.net/HjK5T/

JQueryUI手风琴鼠标悬停帮助

1 个答案: