1

ユーザーが誤ってメニューからホバーしてから再びホバーしたときに、メニューをスライドアップアクションから遅延または停止しようとしています。ユーザーが意図せずにホバー領域からロールオフしたときに、メニューが上にスライドしないようにしています。ユーザーが一瞬のうちにホバーバックし、メニューが上にスライドしないようにしたい。

メニューが上にスライドするのを妨げないため、以下の遅延機能を使用しました。ありがとう。

$(document).ready(function() {
$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(250);

    }, 
    function () {
        //hide its submenu
        $('ul', this).delay(1000).slideUp(500);         
    }
);
});

デモ: http://jsfiddle.net/D3A5g/

これはネルソンが投稿した提案です。jsfiddle では機能しますが、私のページでは機能しません。私のページでの作業を妨げているものを誰か教えてもらえますか?

実際のデモ: http://jsfiddle.net/xwAdG/6/

以下のコードは、テストすると機能しません。それが機能しない理由はありますか？

<html>
<head>
<style type="text/css">
#nav {
padding: 40px;
border: solid #999 1px;
}
#nav ul {
margin: 0;
padding: 0;
display: none;
background-color: #CCC;
}
#nav ul li {
margin: 0;
list-style: none;
list-style-type: none;
padding: 5px;
width: 40px;
}
#nav a {
color: black;
text-decoration: none;
padding: 5px;

}
#nav a:hover {
text-decoration: none;
background-color: yellow;
}​
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<script>
var config = {    
 over: function () { //onMouseOver callback (REQUIRED) 
    $('ul', this).slideDown(250);//show its submenu

},    
timeout: 500, // milliseconds delay before onMouseOut  (default 0)  
out: function () { // function = onMouseOut callback (REQUIRED)
    $('ul', this).slideUp(500); //hide its submenu        
}     
};
$('#nav li').hoverIntent(config);
</script>
</head>

<body>
<ul id="nav">
<li ><a href="#">Main</a>
<ul>
<li><a href="#">AAAAA</a></li>
<li><a href="#">BBBBB</a></li>
<li><a href="#">CCCCC</a></li>
<li><a href="#">DDDDD</a></li>
<li><a href="#">FFFFF</a></li>
</ul>
</li>
</ul>
</body>
</html>

更新: コードを $(document).ready でラップする必要があることがわかりました。こうすることで、htmlページで動作しました。

<script>
$(document).ready(function() {
var config = {    
over: function () { //onMouseOver callback (REQUIRED) 
$('ul', this).slideDown(250);//show its submenu

},    
timeout: 500, // milliseconds delay before onMouseOut  (default 0)  
out: function () { // function = onMouseOut callback (REQUIRED)
$('ul', this).slideUp(500); //hide its submenu        
}     
};
$('#nav li').hoverIntent(config);
});​
</script>
4

1 に答える 1

1

そのためにはhoverIntent プラグインをお勧めします。いくつかのプロジェクトで使用しており、これまでのところ非常に満足しています。

投稿されたコードは、次のようにプラグインで使用されます。

var config = {    
     over: function () { //onMouseOver callback (REQUIRED) 
        $('ul', '#nav li').slideDown(250);//show its submenu

    },    
    timeout: 0, // milliseconds delay before onMouseOut  (default 0)  
    out: function () { // function = onMouseOut callback (REQUIRED)
        $('ul', '#nav li').slideUp(500); //hide its submenu        
    }     
};
$('#nav li').hoverIntent(config);
于 2012-11-24T20:22:39.540 に答える