悬停在 ASP .NET 菜单上答案

【问题标题】：Hover on ASP .NET Menu悬停在 ASP .NET 菜单上
【发布时间】：2012-10-13 04:29:52
【问题描述】：

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

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

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

HTML 代码：

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

请帮忙。

【问题讨论】：

标签： jquery asp.net menu

【解决方案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");


    });
});

【讨论】：

谢谢。它可以工作，但有一个错误。当从 asp .net 菜单打开子菜单并且鼠标移出控件时，它不会向上滑动。
@sanjay_c0d3r 很酷，伙计，我们会修复它，轻弹我一个小提琴，即使用上面的演示并创建问题，将按您的方式轻弹解决方案。 :)

【解决方案2】：

当您悬停菜单项时，菜单会按预期显示，但是当您将鼠标移动到菜单本身时，菜单项不再悬停，因此，您需要做的是获取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>

不只是给菜单（txtcontent）你想要的样式..修复我在这里给的顶部位置等等......

【讨论】：

【解决方案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");
    });
});

请注意，当有多个标题时，这将无法正常工作，每个 .txt 内容将保持可见，直到您浏览它，然后离开它。

【讨论】：

【解决方案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

【讨论】：