-1

フィドルとコードが物語っています。ホバー メニューがあり、div が開いてマウスをそこに移動しようとすると、閉じます。

<html>
<head>
    <script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
    <script>
        $(document).ready(function(){
            $(".dropdown-toggle-products").hoverIntent(makeVisible,makeInvisible);
        }); // close document.ready
        function makeVisible() {
            $(".dropdown-menu.all-products-dropdown").fadeIn(100);
        }
        function makeInvisible() {
            $(".dropdown-menu.all-products-dropdown").fadeOut(100);
        }
    </script>
</head>
<body>
    <a role="button" class="dropdown-toggle-products">Hover me <b class="caret header"></b></a>
    <ul class="dropdown-menu all-products-dropdown">
        <li><a href="#">Now try to hover me</a></li>
    </ul>
</body>
</html>

ここでフィドル

http://jsfiddle.net/dLKYh/1/

4

3 に答える 3

2

カーソルがアンカーから離れた瞬間に、ホバリングしているわけではないからです。

「サブメニュー」が親の内側になるようにメニューを設計する必要があります。ulただし、アンカーの内側に配置しないでください。構造を改善するために div を作成してください。

<div><a></a><ul>...</ul>

div:hoverサブULを監視してから表示できます。div の子を超えている限り、div は閉じません。

この改訂されたフィドルを参照してください: http://jsfiddle.net/dLKYh/3/

于 2013-11-09T07:51:02.140 に答える
1

あなたはそれを正確に行うように言いました：

function makeInvisible() {
                   $(".dropdown-menu.all-products-dropdown").fadeOut(100);}

$(".dropdown-toggle-products") をマウスアウトすると、ul がフェードアウトします。

于 2013-11-09T07:50:53.293 に答える