0

いくつかのアイテムにドロップダウンが付いた、ばかげた水平ナビゲーションバーを作成しようとしています。私がそれをすることに決めた方法は、ドロップダウンをdivタグに入れるだけです。これは簡単に変更できます。HTML側で重くなりたくないだけです。

基本的に、親要素にカーソルを合わせたときにドロップダウンが機能するようにしたいだけです。追加のcssを使用して、見栄えを良くし、配置を改善します。

これが私のjsです：

var dropdown = $('.dropdown');
var parent = dropdown.parent();
$(parent).hover(
    function () {
        dropdown.css('display', 'block');
    }
);

これが私のCSSです：

div.nav {
    text-align: center;
}
div.nav > ul > li {
    margin-top: 15px;
    text-align: center;
    font-size: 1.25em;
}
div.nav > ul > li {
    display: inline-block;
    list-style-type: none;
}
div.nav a {
    padding: 1em;
}
div.dropdown {
    display: none;
    background-color: black;
    position: absolute;
}

これが私のhtmlです：

<div class="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li>
            <a href="game.html">Sample Game</a>
            <div class="dropdown">
                <a href="index.html">About it</a>
                <br>
                <a href="index.html">Game</a>
            </div>
        </li>
        <li><a href="solutions.html">TP Solutions</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact Me</a></li>
    </ul>
<div class="clear"></div>
4

4 に答える 4

1

以下のコードを試してください。

    $(".nav").on("mouseenter","li",function(){
        $(this).find(".dropdown").show();
    });
    $(".nav").on("mouseleave","li",function(){
        $(this).find(".dropdown").hide();
    });

コード"dropdown.parent（）;"->では、子ドロップダウンを持つすべての親を参照し、メニューを表示します。現在のホバーの親を参照する必要があります。以下のリンクで実際の例を確認してください。

http://jsfiddle.net/renjith/wX48f/

于 2013-01-20T07:29:27.550 に答える
1

「親」は予約語であるため、変数名として使用しないでください。

$(document).ready(function() {
    var $dropdown = $('.dropdown'),
        $parent = $dropdown.parent();
    $parent.on("mouseover",
        function () {
            $dropdown.css('display', 'block');
        }
    );
    $parent.on("mouseout",
        function () {
            $dropdown.css('display', 'none');
        }
    );
});
于 2013-01-20T06:18:17.747 に答える
1

鉱夫によると、これは行われなければなりません：

  • 最初にjQueryプラグインを追加します
  • 次に、スクリプトを追加します

したがって、順序は次のようになります。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'>
</script>

<script>
   $(function(){
      var dropdown = $('.dropdown');
      var parent = dropdown.parent();
      $(parent).hover(function () {
         dropdown.css('display', 'block');
      });
   });
</script>
于 2013-01-20T06:33:28.413 に答える
0

ドロップダウンメニューを表示するためにjQueryとCSSを使用するための非常に多くの優れたソリューションがあります。したがって、車輪の再発明をする必要はありません。ニーズに合ったものを見つけることができるかもしれないいくつかの例があります。

于 2013-01-20T06:47:20.253 に答える