2

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

请帮忙。

4

4 回答 4

2

请试试这个:) 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");


    });
});​
于 2012-10-23T09:24:37.713 回答
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>

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

于 2012-10-23T09:21:16.903 回答
0

通过执行以下操作，我设法做到了您想要的

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 内容将保持可见，直到您浏览它，然后离开它。

于 2012-10-23T09:23:16.650 回答
0

除了上面发布的另一种解决方案:)

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

于 2012-10-23T09:30:11.353 回答