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

jquery导航菜单div下拉列表

4 个答案: