Question

我在div中使用了asp .net菜单。我需要通过鼠标悬停在另一个名为“Menu”的div元素上显示菜单。

问题是当鼠标移动到菜单[远离“菜单”div]时菜单消失，从而使菜单无法访问。

jQuery(document).ready(function () {
        //toggle the componenet with class msg_body
        jQuery(".heading").hover(function () {
            jQuery(this).next(".txtcontent").slideToggle("slow");
        });
    });

HTML code：

<div class="heading" style="width: 100%; font-size: 7pt; font-family: 'Lucida Bright';">
<span style="font-size: 20pt">MENU</span>
</div>
<div class="txtcontent" style="width: 90%; display: none;">
<asp:Menu> Menu contents </asp:Menu>
<div>

请帮助。

Answer 1

请尝试:) http://jsfiddle.net/SJHr5/

希望它适合原因:)

<强>代码

<div class="heading" style="width: 100%; font-size: 7pt; font-family: 'Lucida Bright';">
<span style="font-size: 20pt">MENU</span>

<div class="txtcontent" style="width: 90%; display: none;">
    <asp:Menu> Menu contents </asp:Menu>

</div>
</div>

Jquery代码

$(function() {
    $(".heading").hover(function() {
        $(this).find(".txtcontent").slideDown("slow");

    }, function() {
        $(this).find(".txtcontent").slideUp("slow");


    });
});

Answer 2

当您将菜单项悬停时，菜单会按预期显示，但当您将鼠标移动到菜单本身时，菜单项将不再悬停，因此，您需要做的是获取{{1}保存菜单项内的菜单。

你可以这样做：

txtcontent

不只是给你想要的菜单（<div class="heading" style="width: 100%; font-size: 7pt; font-family: 'Lucida Bright';"> <div style="font-size:20pt;position:relative;display:inline-block;"> <span>Menu</span> <div class="txtcontent" style="display:none;position:absolute;top:25px;left:0;"> <asp:Menu> Menu contents </asp:Menu> </div> </div> </div>）..修复我在这里给出的最高位置等等......

Answer 3

我设法通过以下方式做你想做的事情

jQuery(document).ready(function () { 
    //toggle the componenet with class msg_body
    jQuery(".heading").mouseover(function () {
        jQuery(this).next(".txtcontent").slideToggle("slow");
    });
    jQuery(".txtcontent").mouseout(function () {
        jQuery(this).slideToggle("slow");
    });
});

注意当有多个标题时，这将无法正常工作，每个.txtcontent将一直显示，直到您翻过它，然后将其保留。

Answer 4

除了上面发布的另一个解决方案：）

var hideMenuTimeout = null;

jQuery(".heading").hover(
function() {
    jQuery(this).next(".txtcontent").slideDown("slow");
}, function() {
    var self = this;
    hideMenuTimeout = setTimeout(function() {
        jQuery(self).next(".txtcontent").slideUp("slow");
    }, 100);
});

$(".txtcontent").hover(
function() {
    clearTimeout(hideMenuTimeout);
}, function() {
    $(this).slideUp("slow");
});

jsFiddle

将鼠标悬停在ASP .NET菜单上

4 个答案: