1

mouseeneter(こんにちは友人私は）とmouseout()jQueryを使用してドロップダウンメニューを設計しました。問題はmouseout()、メインメニューからドロップダウンリンクが上にスライドすることです。条件を設定する方法がわかりません。助けてください。私のコードは

Jquery

<script>
$(document).ready(function(){
    //alert('hi');
    $('#link-detail').css('display','none');
    $('#hover-detail').mouseenter(function(){
        $('#link-detail').css({position:'absolute',top:'20px',left:'0px',zindex:'99999'});
        $('#link-detail').slideDown();
        });
        $('#hover-detail').mouseout(function(){
        $('#link-detail').slideUp();
        });

    })
</script>

html

<div class="link-detail-wrap"><div id="hover-detail">hover me</div>
<div>
  <ul id="link-detail">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
  </ul>
</div></div>
<div>hihihih</div>

CSS

.link-detail-wrap
{
    float:left;
    width:100%;
    position:relative;
    }

ul#link-detail 
{
    margin:0;
    padding:0;
    border:solid 1px #666;
    border-bottom:none;

    }
ul#link-detail  li
{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;

    }
ul#link-detail  li a
{
    text-decoration:none;
    color:#333;
    padding:2px 50px 2px 10px;
    background:#F0F0F0;
    border-bottom:1px solid #666;
    /*line-height:25px;*/
    font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform:capitalize;
    display:block;
    }
ul#link-detail  li a:hover
{
    background:#CCC;
    }

http://jsfiddle.net/36CXK/でも見ることができます

助けてください

前もって感謝します

4

4 に答える 4

1

スクリプト領域でこのスクリプトを使用する

<script type="text/javascript">
$(document).ready(function(){
        //alert('hi');
        $('#link-detail').css('display','none');


            $("#hover-detail").hover(
  function () {
    $('#link-detail').css({position:'absolute',top:'20px',left:'0px',zindex:'99999'});
            $('#link-detail').slideDown();
  }, 
  function () {
    // do nothing
  }
);

$(".relation").hover(
  function () {
   // do nothing
  }, 
  function () {
    $('#link-detail').slideUp();
  }
);
 })
</script>

追加のcssクラスで作成します

.relation {
    position:relative;
    top:-20px;
}
于 2012-04-06T11:14:39.617 に答える
1

これを行う1つの方法は、一定の遅延を伴うタイムアウトを使用して、マウスを離したときにメニューを上にスライドさせることです。メニューにカーソルを合わせるたびにこのタイムアウトをクリアして、アニメーションが発生しないようにすることができます。

Dropdownタイムアウトを制御するオブジェクトを作成します。

var Dropdown = {
    timer: 0,
    hide: function(callback, delay){
        this.timer = setTimeout(function() {
            return callback.call(this, arguments);
        }, delay);
    },
    reset: function(){
        this.timer && clearTimeout(this.timer);
    }
};

そして、それを利用するためにコードをリファクタリングすることができます：

$('#link-detail').css('display', 'none');

$('#hover-detail').hover(function() {
    Dropdown.reset();
    $('#link-detail').css({
        position: 'absolute',
        top: '20px',
        left: '0px',
        zindex: '99999'
    });
    $('#link-detail').slideDown();
}, function() {
    Dropdown.hide(function(){
        $('#link-detail').slideUp();
    }, 200);
});

$('#link-detail').hover(function() {
    Dropdown.reset();
}, function(){
    Dropdown.hide(function(){
        $('#link-detail').slideUp();
    }, 200);
});

そして、これは実用的なフィドルです。

于 2012-04-06T11:33:52.603 に答える
0

行をコメントアウトするだけ$('#link-detail').slideUp();です。

ここを参照してください：

http://jsfiddle.net/36CXK/1/

于 2012-04-06T11:00:23.730 に答える
0

すでに利用可能なjQueryドロップダウンリストプラグインの1つを使用してみませんか：

それらはスタイリングが簡単で、すべての機能がすでに実装されています。あなたがする必要があるのはあなたの好みに合わせてドロップダウンをスタイリングすることです。

于 2012-04-06T11:02:10.920 に答える