0

ええと、私はすでに似たようなことを尋ねたことを知っていますが、私は必死です.このドロップダウンメニューを機能させる必要があります. これは私のコードです。

<div class="nav-menu">
    <ul class="menu-items">
        <li><a href="#" class="nav-home">Home</a></li>
        <li><a href="#" class="nav-about"About</a></li>
    </ul>
    <div id="dropdown-home" class="dropdown-menu">
        <ul class="dropdown-items">
            <li><a href="#">Something</a></li>
            <li><a href="#">Something else</a></li>
        </ul>
    </div>
    <div id="dropdown-about" class="dropdown-menu">
        <ul class="dropdown-items">
            <li><a href="#">Something</a></li>
            <li><a href="#">Something else</a></li>
        </ul>
    </div>
</div>

私がやりたいことは、クラス「nav-home」の要素にカーソルを合わせると、ID「dropdown-home」の要素が何らかの効果で表示されることです。jqueryでやってみたのですが、勉強中なのでやり方がわかりません。誰かが私を助けることができますか？

ありがとう。

4

5 に答える 5

1

ただし、これにより、テキストは id .dropdown-[text] と一致する必要があります 

 $('ul.menu-items li').on('mouseenter', function() {
        var text = $(this).text().toLowerCase();
       $('div.dropdown-menu').hide();  
       $('div#dropdown-'+text).show();          
    });

    $('ul.menu-items li').on('mouseout', function() {
        $('div.dropdown-menu').hide();        
    });

http://jsfiddle.net/XpaB7/4/

于 2012-12-19T22:30:40.340 に答える
0 
$('.menu-items a').hover(function(){
    $('div[id&='+$(this).prop('class').split('-')[1]+']').show();
}, function(){
    $('.dropdown-menu').hide();
});
于 2012-12-19T22:18:12.040 に答える
0

Bootstrapをお勧めします。ニーズに合ったドロップダウン 機能が組み込まれています。

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
于 2012-12-19T22:18:21.493 に答える
0

これを試して

$('.nav-home, .nav-about').on({
    mouseenter: function() {
        var cls = $(this).attr('class').split('-')[1];
        var id = '#dropdown-' + cls;
        $('.dropdown-menu').hide();
        $(id).show();
    },
    mouseout: function() {
        $('.dropdown-menu').hide();
    }
});​

フィドルをチェック

于 2012-12-19T22:18:56.240 に答える
0 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
    .menu-items, .menu-items a, .menu-items li {
        float:left;
        margin:0;
        list-style:none;
    }
    .menu-items li {
        min-width:150px;
    }
    .dropdown-items, .dropdown-items li {
        float:left;
        clear:both;
        list-style:none;
        margin:0;
        padding:0;
    }
    .dropdown-items {
        display:none;
    }
</style>
<div class="nav-menu">
    <ul class="menu-items">
        <li><a href="#" class="nav-home">Home</a>

            <ul class="dropdown-items">
                <li><a href="#">Something</a>

                </li>
                <li><a href="#">Something else</a>

                </li>
            </ul>
        </li>
        <li><a href="#" class="nav-about">About</a>

            <ul class="dropdown-items">
                <li><a href="#">Something</a>

                </li>
                <li><a href="#">Something else</a>

                </li>
            </ul>
        </li>
    </ul>
</div>
<script type="text/javascript">
    $('.menu-items li').not(":animated").hover(

    function () {

        $(this).find(".dropdown-items").fadeIn(200)
    },

    function () {

        $(this).find(".dropdown-items").fadeOut(200)
    });
</script>
于 2012-12-19T22:47:12.880 に答える