Jquery级联时间限制？

Question

以下代码：

        <script type="text/javascript" >
            $("#accordion > li > div").hover(function () {
                if (false == $(this).next().is(':visible')) {
                    $('#accordion ul').slideUp(300);
                }
                $(this).next().slideToggle(300);
            });
        </script>

当用户将鼠标悬停在li>div项上时，它将向下层叠，但当我看到选项时，它将重新层叠。

编辑:滑动速度在300毫秒时似乎工作得很好，但我想让它显示3秒，然后回滚？

我如何保持级联几秒钟？这样用户就可以点击安莉的项目了吗？

编辑:添加我的JSFIDDLE - http://jsfiddle.net/dttdB/

Answer 1

新答案

好了，听起来你对javascript是个新手。恭喜你找到了jQuery，它一定会是你的好朋友！现在，我将向您演示jQuery-ui手风琴

css

<!-- language: lang-css -->
    #accordion h3 {
        background-color:grey;
        background-repeat: no-repeat;
        /*border-radius: 10px 10px 10px 10px;*/
        cursor: pointer;
        display: block;
        font-weight: bold;
        height: 48px;
        list-style: circle outside none;
        margin: 1px;
        width: 230px;
    }

html

<!-- language: lang-html -->
    <div id="leftWrap">
        <div id="accordion">
            <h3>Absorption</h3>
            <div>
                <ul>
                    <li><a href="c-77-accessories.aspx">Accessories</a><ul>
                        <li><a href="c-81-aa500afg.aspx">AA500AFG</a></li>
                        <li><a href="c-79-aa500f.aspx">AA500F</a></li>
                        <li><a href="c-80-aa500g.aspx">AA500G</a></li>
                        <li><a href="c-78-aa990f.aspx">AA990F</a></li>
                        </ul>
                    </li>
                    <li><a href="c-82-consumables.aspx">Consumables</a></li>
                    <li><a href="c-76-products.aspx">Products</a></li>
                </ul>
            </div>
            <h3>Fluorescence</h3>
            <div>
                <ul>
                    <li><a href="c-101-accessories.aspx">Accessories</a></li>
                    <li><a href="c-102-consumables.aspx">Consumables</a></li>
                    <li><a href="c-100-products.aspx">Products</a></li>
                </ul>
            </div>
        </div>
    </div>

javascript

 <!-- language: lang-js -->
    $("#accordion").accordion({ header: 'h3',
                                event: 'mouseover',
                                active:false });

老答案

使用一些html我可以给出一个更好的答案，但通常我认为您需要绑定到.hover()中的两个function()选项。

    <script type="text/javascript" >
            $("#accordion > li > div").hover(function (event) {
//the user has moved their mouse on top of the selected Div "#accordion > li > div"
//this will 'slide' whatever is next to the div
              $(this).next().slideToggle(300);
             }, function(event){
//the user has moved their mouse away from the selected Div "#accordion > li > div"
//warning, they may be trying to click on a link in the $(this).next(), don't close on them!
//I will need some html to help more than this
             });
        </script>

js-小提琴

我想我做到了right

Answer 2

你可以试一试

return false;

动画之后，或停止事件的传播。JQuery Documentation

我似乎记得在事件触发动画时遇到过这个问题很多次。