Question

我是jQuery的新手，我希望你们能帮助我。我正在尝试制作一个悬停下拉菜单，但它非常错误。你能帮我清理一下我的Javascript吗？请看我的代码。

无论出于何种原因，它都无法在jsdo.it上运行，但它适用于Komodo Edit。

如果你真的想自己试试代码，问题主要是Javascript。你可以帮助我做到这一点，当用户将鼠标悬停在img.menu_class上时，ul.file_menu下降，然后，如果我想，我可以将鼠标悬停在ul中的#something上，它会在水平上而不是垂直地退出。

感谢您的帮助！我很感激！

我应该放弃并让它在CSS中运行吗？

Answer 1

您可以执行this：

之类的操作

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

和here子菜单的示例：

$(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

对于今后发现这一点的任何人，可以使用.slideToggle()缩短Aram的答案来处理上下。

这是修改过的小提琴

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

我知道这可能有点晚了但是刚发现这个帖子看到你上面关于菜单下面的事情的问题＆＃39;变得有点棘手＆＃39;没有答案。

如果你给div你的课程＆＃39;文件菜单＆＃39;一个绝对位置然后它应该停止影响它前面的任何元素，因为你将它从正常流程中取出。

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>

jQuery下拉悬停菜单

7 个答案: