jQuery菜單-在下拉懸停時保持菜單處於活動狀態

Question

這是jsfiddle的鏈接，我正在編寫一個滿足我需要的jquery菜單。 我知道這里不需要重新設置輪子，但這也是一種學習經驗。

另外，我知道代碼很丑陋，但是一旦它能正常工作，我將對其進行重組和清理。

我的問題是，當我將鼠標懸停在下拉鏈接上時，它消失了。 我希望它留在那里並且父菜單處於活動狀態。 任何幫助表示贊賞。

這是一些代碼：

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
</head>
<body>
  <div>
    <ul>
        <li>
            <div class="menu-item"></div>
            <div class="menu-text">text</div>
            <div class="dropdown">
                <div class="dropdown-item"><a href="#">item 1</a></div>
                <div class="dropdown-item"><a href="#">item 2</a></div>
                    <div class="dropdown-item"><a href="#">item 3</a></div>
            </div>
        </li>
        <li><div class="menu-item"></div><div class="menu-text">texttexttext</div></li>
        <li><div class="menu-item"></div><div class="menu-text">tetexttexttexttexttexttexttextxt</div></li>
      </ul>
  </div>
<script>
    $(function() {    
        $("div.menu-text").mouseover(function () {
            $(this).prevAll('div.menu-item').animate({height: '100%'},
                {
                    duration: 700,
                    specialEasing: {height: 'easeOutQuint'}
                }
            );
            if($(this).siblings('div.dropdown').is(':hidden')){
                $(this).siblings('div.dropdown').slideDown();
            }
        });

        $("div.menu-text").mouseout(function () {
             $(this).prevAll('div.menu-item').animate({height: '10px'}, 700);
            if($(this).siblings('div.dropdown').is(':visible')){
                $(this).siblings('div.dropdown').slideUp();     
            }
        });   

        $("div.dropdown-item a").hover(function () {
            $(this).parent().siblings('div.menu-item').css("display","block");
            $(this).parent().css("display","block");
        });    
    }); 
  </script> 
</body>
</html>

這是CSS：

li {
    background-color: #ccc;
    position: relative;
    color: #fff;
    z-index: -2;
    float: left;
}

div.menu-item {
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    z-index: -1;
}

div.menu-text {
    color: #fff;
    margin: 0;
    padding: 20px 10px;    
}

div.dropdown {
    display: none;
    position: absolute;
}

div.dropdown-item a {
    padding: 10px;  
    background-color: #1E4b55;
    display: block;
    white-space: nowrap;
}

Answer 1

您的JS有很多改進的空間，但這可以解決問題：

http://jsfiddle.net/bUh4L/16/

$(function() {
    $("li").hover(
        function() {
            $(this).find('div.menu-item').animate({height: '100%'},
                {
                    duration: 700,
                    specialEasing: {
                        height: 'easeOutQuint'
                    }
                });
            if($(this).find('div.dropdown').is(':hidden')) {
                $(this).find('div.dropdown').slideDown();
            }
        },
        function() {
            $(this).find('div.menu-item').animate({height: '10px'}, 700);
            if($(this).find('div.dropdown').is(':visible')){
                $(this).find('div.dropdown').slideUp();     
            }
        }
    );
});

我正在使用.hover() ，它具有兩個函數，第一個用於懸停開始時，第二個用於懸停結束時。 您還需要將其移動到父元素（ li ），以便將鼠標懸停在頂部子元素上時保持懸停。

Answer 2

看到這個： http : //jsfiddle.net/Y9knm/

$(function () {
 $("li").hover(
 function () {
    $(this).find('div.menu-item').stop().animate({
        height: '100%'
    }, {
        duration: 700,
        specialEasing: {
            height: 'easeOutQuint'
        }
    });
    $(this).find('div.dropdown').slideDown();
 },

 function () {
    $(this).find('div.menu-item').stop().animate({
        height: '10px'
    }, 700);
    $(this).find('div.dropdown').stop().slideUp();
 });
});

Answer 3

jsfiddle示例不完整。 需要jquery緩動庫。 不在jsfiddle示例中。

jQuery菜單-在下拉懸停時保持菜單處於活動狀態

問題描述

3 個解決方案

解決方案1
1 2013-01-22 06:49:06

解決方案2
1 已采納 2013-01-22 07:11:21

解決方案3
0 2013-05-08 11:20:05

jQuery菜單-在下拉懸停時保持菜單處於活動狀態

問題描述

3 個解決方案

解決方案1 1 2013-01-22 06:49:06

解決方案2 1 已采納 2013-01-22 07:11:21

解決方案3 0 2013-05-08 11:20:05

解決方案1
1 2013-01-22 06:49:06

解決方案2
1 已采納 2013-01-22 07:11:21

解決方案3
0 2013-05-08 11:20:05