0

2 つのナビゲーション リンク (リンク 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

4 に答える 4

1

最善の方法: それらのリンクにクラスを与えて選択します。

その方法は、現在の DOM 構造で機能します。

$('div.navBox a').filter(function(){
    return this.innerHTML == "Link 1" &&
           this.innerHTML == "Link 3";
}).whatYouWant();
于 2012-07-03T00:15:30.717 に答える
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();
});
于 2012-07-03T03:19:59.557 に答える
0

$('.navBox ul li a') を使用するか、リンクにクラス名を付けて、それを使用します。

于 2012-07-03T00:15:45.950 に答える
0 
$('a:contains("Link 1"), a:contains("Link 3")', '.navBox').on('click', function(e){
    e.preventDefault();
    $('.lowerContainer').slideToggle();
});​
于 2012-07-03T00:22:16.883 に答える