jquery - jquery 导航菜单 div 下拉菜单

Question

当您单击两个导航链接（仅限链接 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>

Answer 1

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

一种适用于您当前 DOM 结构的方法：

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

Answer 2

使用 $('.navBox ul li a') 或给链接一个类名，然后使用它。

Answer 3

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

Answer 4

您可以重新排序标记，以便您拥有：

<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();
});