2

div で asp .net メニューを使用しました。「Menu」という別の div 要素にマウスを置いてメニューを表示する必要があります。

問題は、マウスが ["Menu" 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>

Jクエリコード

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

上記に投稿されたものに加えて別の1つの解決策:)

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 に答える
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");
    });
});

複数の見出しがある場合、これは正しく機能しないことに注意してください。

于 2012-10-23T09:23:16.650 に答える