jQuery下拉懸停菜單

Question

我是jQuery的新手，我希望你們能幫助我。 我正在嘗試制作一個懸停下拉菜單，但它非常錯誤。 你能幫我清理一下我的Javascript嗎？ 請看我的代碼。

http://jsdo.it/mretchin/4Ewk

它無論出於什么原因都不適用於jsdo.it，但它適用於Komodo Edit。

如果你真的想自己試試代碼，問題主要是Javascript。 你可以幫助我做到這一點，當用戶將鼠標懸停在img.menu_class上時，ul.file_menu會下降，然后，如果我願意，我可以將鼠標懸停在ul中的#something上，它會在水平上掉落而不是垂直掉落。

謝謝你的幫助！ 我很感激！

我應該放棄並讓它在CSS中運行嗎？

Answer 1

你可以這樣做此 ：

$(document).ready(function() {
    $(".hoverli").hover(
        function() {
            $('ul.file_menu').stop(true, true).slideDown('medium');
        },
        function() {
            $('ul.file_menu').stop(true, true).slideUp('medium');
        }
    });
});

這里有一個子菜單示例：

$(document).ready(function() {
    $(".hoverli").hover(
        function() {
            $('ul.file_menu').slideDown('medium');
        },
        function() {
            $('ul.file_menu').slideUp('medium');
        }
    );

    $(".file_menu li").hover(
        function() {
            $(this).children("ul").slideDown('medium');
        },
        function() {
            $(this).children("ul").slideUp('medium');
        }
    );
});

Answer 2

對於任何在將來發現這一點的人來說，Aram的答案可以通過.slideToggle()縮短來處理上下。

這是修改過的小提琴

http://jsfiddle.net/4jxph/2009/

如果你有一個子菜單設置為display: none; 它也會觸發它，所以你要做的是將它設置為block ，然后添加這樣的東西

var subMenu = $('li.hoverli > ul > li');

subMenu.hover(function () {
            $(this).find("ul").slideToggle(200);
        });

並將其放在第一個slideToggle下方。 我為什么不給你看？

$(document).ready(function () {
    $(".hoverli").hover(function () {
     $(this).find('ul').slideToggle('medium');
    });

    var subMenu = $('li.hoverli > ul > li');

    subMenu.hover(function () {
      $(this).find("ul").slideToggle(200);
    });
});

Answer 3

不確定你是否關心，但你想確保你運行.stop（）方法，動畫不會自行構建並反復運行。 這是一個例子

http://jsfiddle.net/4jxph/1335/

$(document).ready(function () {
    $(".hoverli").hover(
  function () {
     $('ul.file_menu').stop(true, true).slideDown('medium');
  }, 
  function () {
     $('ul.file_menu').stop(true,true).slideUp('medium');
  }
);

});

Answer 4

使用jQuery中的finish函數來防止將鼠標快速懸停在菜單上並退出菜單的錯誤。 完成比先前建議的停止功能更好。

$(document).ready(
    function () {
        $(".hoverli").hover(
          function () {
             $('ul.file_menu').finish().slideDown('medium');
          }, 
          function () {
             $('ul.file_menu').finish().slideUp('medium');
          }
    );
});

Answer 5

Aram Mkrtchyan的答案幾乎就在我身邊。 他的問題是，如果你在菜單下面添加任何內容，那么它就會變得棘手。 這是我的意思的一個例子，我在他的菜單下面添加了一個div： http ： //jsfiddle.net/4jxph/3418/

我使用div而不是列表和列表項（我發現它更容易使用，並且更靈活）和jQuery版本1.9.1提交此更新的答案

這里是jFiddle的鏈接： http ： //jsfiddle.net/4jxph/3423/

這是代碼：

--------------- HTML：

<div id="divMenuWrapper1" class="divMenuWrapper1">
    <div id="hoverli">
        <div class="lbtn">
            Actions
        </div>
        <div id="actions_menu" class="file_menu">
            <div><a href="#file">File</a></div>
            <div><a href="#edit">Edit</a></div>
            <div><a href="#view">View</a></div>
            <hr />
            <div><a href="#insert">Insert</a></div>
            <div><a href="#modify">Modify</a></div>
            <div><a href="#control">Control</a></div>
            <div><a href="#debug">Debug</a></div>
            <div><a href="#window">Window</a></div>
            <div><a href="#help">Help</a></div>
        </div>
    </div>
</div>

<div>
    testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu 
</div>

--------------- Css：

.lbtn
{
    display:inline-block;
    cursor:pointer;
    height:20px;
    background-color:silver;
    background-repeat:repeat-x;      
    border:1px solid black; /* dark navy blue */ 
    text-decoration:none;
    font-size:11pt;
    text-align:center;
    line-height:20px;
    padding:0px 10px 0px 10px;
}

.divMenuWrapper1
{
    height: 25px;
    width: 75px;
}

.file_menu 
{
    display:none;
    width:250px;
    border: 1px solid #1c1c1c;
    background-color: white;
    position:relative;
    z-index:100000;
}

.file_menu div 
{
    background-color: white;
    font-size:10pt;
}

.file_menu div a 
{
    color:gray; 
    text-decoration:none; 
    padding:3px; 
    padding-left:15px;
    display:block;
}

.file_menu div a:hover 
{
    padding:3px;
    padding-left:15px;
    text-decoration:underline;
    color: black;
}

--------------- jQuery（放在document.ready或pageLoad（）中）：

$("#hoverli").hover(
    function () {
        $('#actions_menu').finish().slideDown('fast');
    },
    function () {
        $('#actions_menu').finish().slideUp('fast');
    }
);

Answer 6

我知道這可能有點晚了但只是發現這個帖子看到你上面關於菜單“變得有點棘手”的問題沒有答案。

如果你給div你的類'文件菜單'一個絕對的位置那么它應該停止影響它前面的任何元素，因為你將它從正常流程中取出。

Answer 7

要在懸停到其內容所需的確切高度時打開選擇框，請確定有多少元素：

JavaScript的

function DropList(idval) {
    //
    // fully opens a dropdown window for a select box on hover
    //
    var numOptgroups = document.getElementById(idval).getElementsByTagName('optgroup').length;
    var numOptions   = document.getElementById(idval).getElementsByTagName('option').length;
    document.getElementById(idval).size = numOptgroups + numOptions;
}

HTML

<select class="selectpicker" id="heightMenu" onmouseover="DropList('heightMenu')" onmouseout="this.size=1;" size="1">
    <option value="0">Any height</option>
    etc.
</select>