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 回答