2

リンク (水平ナビゲーション バー アイテム) があり、ユーザーがその上にカーソルを合わせると、すぐ下に別のリンクが表示されdivますslideDown。.toggleリンクの上にカーソルを置いているときにdivを継続的に切り替えるため、機能しません。

mouseoverandを使用して独自に記述しようとしましmouseOutたが、感度が高すぎdivて、ディスプレイ間で前後に反転します (ブロック、なし)。

これが私のjQueryです：

    $(".topHorzNavLink").mouseover(function() {

    //get which link we hovered over
    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {

        $("#hoverContainer").slideDown('slow');

    }

});

$(".topHorzNavLink").mouseout(function() {

    //get which link we hovered over
    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {

        $("#hoverContainer").slideUp('slow');

    }

});

HTML は次のとおりです (ある時点で動的になることはわかっています)。

<nav id="topHorzNav">

            <div id="topHorzNavLinks">

                <ul>
                    <li><p class="topHorzNavLink" linkItem="link1"><a href="#">Link 1</a></p></li>
                    <li><p class="topHorzNavLink" linkItem="link2"><a href="#">Link 2</a></p>
                <div id="hoverContainer">
                    <div class="colContainer">
                        <div class="colContainer">
                            <div class="colContainer">
                                <div class="colContainer">
                                    <div class="colContainer">

                                        <!--col 1-->
                                        <div class="col">
                                            <p class="colHeader">Heading 1</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col2 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 2</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col3 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 3</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col4 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 4</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>

                                        <div class="colDivider">&nbsp;</div>

                                        <!--col5 -->
                                        <div class="col">
                                            <p class="colHeader">Heading 5</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                            <p class="colText">Lorem Ipsum Dolar</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    </li>
                    <li><p class="topHorzNavLink"><a href="#" class="topHorzNavLink" linkItem="link3">Link 3</a></p></li>
                    <li><p class="topHorzNavLink"><a href="#" class="topHorzNavLink" linkItem="link4">Link 4</a></p></li>
                </ul>

            </div>

            <div id="topHorzNavRight">&nbsp;</div>

        </nav>
        <!--end top horz nav items-->
4

2 に答える 2

1

関数を使用して、キューに入れられたアニメーションをクリアする必要があります.stop()。そうしないと、移動するたびに、<li>より多くのアニメーションがトリガーされます。もう 1 つの問題は、ポインターが子要素内にある場合でもmouseover()、アニメーションをトリガーするものを使用していることです。また、ポインターが子要素を離れたときにバブルアップするイベントも作成します。とを使用したほうがよいでしょう。mouseout().mouseenter().mouseleave()

HTML5 と jQuery 1.7.2 を使用したデモを次に示します。あなたの例は非常に冗長だと言わざるを得ません！

HTML

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a>
            <div>
                <!--col 1-->
                <section>
                    <header><h1>Heading 1</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <!--col2 -->
                <section>
                    <header><h1>Heading 2</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <section>
                    <header><h1>Heading 3</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <section>
                    <header><h1>Heading 4</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
                <section>
                    <header><h1>Heading 4</h1></header>
                    <article>
                        <p class="colText">Lorem Ipsum Dolar</p>
                        <p class="colText">Lorem Ipsum Dolar</p>
                    </article>
                </section>
            </div>
        </li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</nav>​

CSS

ul {
    width:150px;
}
li {
    border:1px dashed lightgrey;
}
li > div {
    display:none;
}
h1 {
   font-size:14px;
}

​section {
    padding-bottom:8px;
    border-bottom:1px dashed lightblue;
}

</p>

JavaScript

$('li').on({
    mouseenter: function() {
        $(this).find('div:first').stop(true, true).slideDown('slow');
    },
    mouseleave: function() {
        $(this).find('div:first').stop(true, false).slideUp('slow');
    }
});​
于 2012-06-20T10:24:33.350 に答える
0

hover()関数を使ったほうがいいです。2 つのパラメーターがあり、それぞれが関数です。1枚mouseover目はイベント用、2枚目はmouseoutイベント用です。

次のコードを試してみましたが、うまくいきました：

$(function() {  
$('#nav-list>li').hover(function(e) {
    $(this).children('ul').slideDown(300);
}, function(e) {
    $(this).children('ul').slideUp(200);
});
});
于 2012-06-19T23:52:55.753 に答える