Javascript jQuery下拉悬停菜单_Javascript_Jquery

Javascript jQuery下拉悬停菜单

javascript jquery

Javascript jQuery下拉悬停菜单,javascript,jquery,Javascript,Jquery,我是jQuery的新手，我希望你们能帮我。我正试图制作一个悬停下拉菜单，但它的车太多了。你能帮我清理一下Javascript吗？请看我的密码不管出于什么原因，它在jsdo.It上都不起作用，但它在Komodo Edit中起作用如果你真的想自己尝试代码，问题主要是Javascript。你能帮我做一个这样的设置吗？当用户悬停在img.menu类上时，ul.file\u菜单会下降，然后，如果我愿意，我可以悬停在ul中的某个东西上，它会水平下降，而不是垂直下降谢谢你的帮助！我很感激我应该放弃，

我是jQuery的新手，我希望你们能帮我。我正试图制作一个悬停下拉菜单，但它的车太多了。你能帮我清理一下Javascript吗？请看我的密码

不管出于什么原因，它在jsdo.It上都不起作用，但它在Komodo Edit中起作用

如果你真的想自己尝试代码，问题主要是Javascript。你能帮我做一个这样的设置吗？当用户悬停在img.menu类上时，ul.file\u菜单会下降，然后，如果我愿意，我可以悬停在ul中的某个东西上，它会水平下降，而不是垂直下降

谢谢你的帮助！我很感激

我应该放弃，让它在CSS中工作吗？

你可以做如下事情：

以及一个带有子菜单的示例：

$(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');
        }
    );
});

不确定您是否在意，但您希望确保运行.stop（）方法，这样动画就不会自行构建并反复运行。这里有一个例子

对于将来发现这一点的任何人，可以使用

.slideToggle（）

缩短Aram的答案，以处理上下问题

这是修改过的小提琴

如果子菜单设置为

display:none它也会触发它，所以您要做的是将其设置为block
，然后添加类似的内容
var subMenu = $('li.hoverli > ul > li');

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

并将其放置在第一个幻灯片切换的正下方。为什么我不让你看看呢
$(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);
    });
});

使用jQuery中的finish函数可以防止将鼠标快速悬停在菜单上或从菜单中移出的错误。Finish比之前建议的停止功能更好
$(document).ready(
    function () {
        $(".hoverli").hover(
          function () {
             $('ul.file_menu').finish().slideDown('medium');
          }, 
          function () {
             $('ul.file_menu').finish().slideUp('medium');
          }
    );
});

阿拉姆·姆克提安的回答几乎就在我的面前。他的问题是，如果你在菜单下面添加任何东西，那么它就会变得很糟糕。以下是我的意思示例，我在他的菜单下添加了一个div：

我使用div而不是列表和列表项（我发现它们更容易使用，而且更灵活）和jQuery版本1.9.1提交这个更新的答案
以下是JFIDLE的链接：

代码如下：
---------------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>

---------------jQuery（放置在document.ready或pageLoad（）中）：
我知道这可能有点晚了，但刚刚发现这条线索，看到你上面关于菜单下“变得有点疯狂”的问题没有得到回答
如果使用类“文件菜单”将div设置为绝对位置，则它应停止影响其前面的任何元素，因为您将使其脱离正常流程。
若要在悬停时将选择框打开到其内容所需的确切高度，请计算有多少元素：
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

任何高度
等
您可以发布Komodo编辑版本的链接吗？我认为问题在于jQuery没有包含在jsdo.it中。我真的很累，那是凌晨1点，我不想惹麻烦。我怎样才能对子菜单应用相同的技术？当你快速地将鼠标悬停和悬停时，所有事件都存储在队列中，菜单的打开和关闭次数与鼠标悬停时的次数相同，即使你保持鼠标空闲。我如何才能消除这种影响？Venu Gopal添加此站（真，真）请在您的答案中添加一些内容，除了一个指向某个地方的链接。如果这个链接被删除，你的答案就没用了。这在你添加另一个div的时候效果很好。然后是很多问题。我的错。停止（[quecache]，[finishthecurrentanim]）
<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>

.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;
}

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

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;
}

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