Question

我有一个侧边栏菜单，可以通过jQuery打开和关闭页面的隐藏部分。该链接既淡化隐藏内容又添加和删除链接的类。例如，html / css

<ul>
<li><a class="linkOne" href="#">Link One</a></li>
<li><a class="linkTwo" href="#">Link Two</a></li>
</ul>

<div class="linkOneBox">Stuff</div>
<div class="linkTwoBox">Stuff</div>

<style type="text/css">
.linkOneBox,.linkTwoBox {display:none}
.current {background: #fff}
</style>

和jQuery类似..

$('.linkOne').click(function() {
    $('.linkOneBox').fadeToggle();
    $(this).toggleClass('current'); 
    return false; 
    });

无论如何..我的问题是，因为我正在使用切换，所有其他切换的剩余开关重置为关闭的最佳方法是什么？我如何拥有它以便单击一个新链接也隐藏所有以前打开的窗口并删除.current？

Answer 1

我同意马克，但请使用：

$(this).addClass('current');

因为toggleClass首先检查该类是否存在。

Answer 2

我首先对HTML进行一些更改：

<ul id="menu">
    <li><a href="#b1">Link One</a></li>
    <li><a href="#b2">Link Two</a></li>
</ul>

<div class="box" id="b2">Stuff</div>
<div class="box" id="b1">Stuff</div>

然后：

$(document).ready(function(){

    // Initially hide the boxes
    $('.box').hide();

    $('#menu a').click(function(){

        $('#menu a').removeClass(); // Remove 'current' class from any links
        $('.box:visible').fadeToggle(); // Hide all previously visible boxes

        // Fade in the box where the id is the same as the href of the clicked link
        $($(this).attr('href')).fadeToggle(); 
        $(this).addClass('current'); // And highlight the menu link

        return false; 
    });

});

有一些重叠，所以你可能只想在打开新的框之前打开hide()。

隐藏所有先前切换的元素

2 个答案: