CODEWITHSUNDEEP
jqueryhtmlcss
Oli Olivier
Oli Olivier

Reputation: 1

jquery navigation menu div dropdown

I'm trying to get a div to drop down when you click two of the navigation links (Link 1 and Links 3 only). So far I can only make it drop by clicking on the navigation block ('.navBox'). how can I pass the href... links instead? Please help..

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>

Upvotes: 0

Views: 403

Answers (4)

Chad
Chad

Reputation: 5408

You could reorder your markup so you have:

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

That way you could solve for it doing:

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

Upvotes: 0

adeneo
adeneo

Reputation: 318182

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

Upvotes: 0

dezman
dezman

Reputation: 19358

Use $('.navBox ul li a') or give the links a class name, and use that.

Upvotes: 0

gdoron
gdoron

Reputation: 150253

Best way: give those link a class and select them.

A way to that works with your current DOM structure:

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

Upvotes: 1

Related Questions