jquery导航菜单div下拉列表

时间:2012-07-03 00:11:57

标签: jquery html css

当您点击两个导航链接(仅限链接1和链接3)时,我试图让div下拉。到目前为止,我只能通过单击导航块('.navBox')来降低它。我怎样才能通过href ...链接呢? 请帮忙..

HTML / jQuery:

    $(document).ready(function(){
    $('.navBox').toggle(function(){
        $('.lowerContainer').slideDown();
    }, function(){
        $('.lowerContainer').slideUp();
    });
});

<div id="header">
    <div class="wrapper">
        <div class="logoBox">
                Logo
        </div>
        <div class="navBox">
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="lowerContainer" style="display: none;">
    <div class="lowerWrapper">
        <div id="boxed">
        </div>
    </div>
</div>
<div class="mainContent">
    <div class="contentArea">
        <div class="sportsIcons">
            <div id="boxed">
            </div>
        </div>

    </div>
</div>
    <br/>
    <div class="line">
    </div>

</div>

4 个答案:

答案 0 :(得分:1)

最好的方法:给这些链接一个类并选择它们。

这种方法适用于您当前的DOM结构:

$('div.navBox a').filter(function(){
    return this.innerHTML == "Link 1" &&
           this.innerHTML == "Link 3";
}).whatYouWant();

答案 1 :(得分:0)

使用$('。navBox ul li a')或为链接指定一个类名,然后使用它。

答案 2 :(得分:0)

$('a:contains("Link 1"), a:contains("Link 3")', '.navBox').on('click', function(e){
    e.preventDefault();
    $('.lowerContainer').slideToggle();
});​

答案 3 :(得分:0)

您可以重新排序标记,以便:

<ul>
    <li>
        <a href="#">menu item</a>
        <div>Dropdown</div>
    </li>
    <li>
        <a href="#">menu item</a>
        <div>Dropdown</div>
    </li>
</ul>

这样你可以解决它:

$('ul li a').click(function() {
    $(this).next().show();
});