Question

我已经使用以下代码来控制一系列3个侧边栏。正如您所看到的，代码并不是特别有效，因为我只是重复了每个类的内容。如果可能的话，我想简化这个功能吗？

我还希望添加仅允许一个侧边栏处于活动状态的功能。因此，如果侧边栏.artists为.active而我点击侧边栏.about，则.artists侧边栏将会崩溃。

感谢。

JQuery的

$(function() {
    $( ".artists" ).click(function() {
        $( ".sidebar.artists" ).toggleClass( "active" );
    });
});

$(function() {
    $( ".about" ).click(function() {
        $( ".sidebar.about" ).toggleClass( "active" );
    });
});

$(function() {
    $( ".history" ).click(function() {
        $( ".sidebar.history" ).toggleClass( "active" );
    });
});

HTML

<nav>
    <ul>
        <li class="artists"><a>Artists</a></li>
        <li><a href="<?=get_permalink(6)?>">News</a></li>
        <li class="about"><a>About</a></li>
        <li class="history"><a>History</a></li>         
    </ul>
</nav>

<nav class="sidebar artists">
    Sidebar Artists content
</nav>

<nav class="sidebar about">
    Sidebar About content
</nav>

<nav class="sidebar history">
    Sidebar History content
</nav>

Answer 1

您可以使用它来优化它：

$(function() {
    $( ".sidebar" ).click(function() {
        $(this).toggleClass( "active" );
         $(".active").toggleClass( "active" );
    });
});

根据标记代码，我建议您将主要ul的ID添加为main-nav：

 $(function() {
    $( "#main-nav li" ).click(function() {

        var cls = this.className;

        $(this).addClass( "active" )
         .siblings("li").removeClass( "active" );

         $(".sidebar."+cls).slideToggle()
           .siblings(".sidebar").slideUp();

    });
});

Answer 2

正如您已经提供了标记，我已经更改了我的代码。

试试这个：

我已检查此代码并且它可以正常运行

<强> JS

 $(document).ready(function(){
   $('ul li').on('click',function(){
     $('.sidebar').hide();
     $(this).parent().parent().siblings("." +$(this).attr('class')).show();
   });
 });

或者使用active类

$('ul li').on('click',function(){
     $('.sidebar').removeClass('active');
     $(this).parent().parent().siblings("." +$(this).attr('class')).addClass('active');
 });

以下是小提琴示例： http://jsfiddle.net/5angwsnb/3/

希望它也适合你！

<强>更新

<强> CSS：

.sidebar{
   display:none;
 }
.active{
   //your transition here
 }

Answer 3

$('.artists, .about, .history').click(function() {

    var subClass = '';
    if($(this).hasClass('artists')) {
        subClass = 'artists';
    } else if($(this).hasClass('about')) {
        subClass = 'about';
    } else if($(this).hasClass('history')) {
        subClass = 'history';
    }

    $('.sidebar:not(.'+subClass+')').removeClass('active');
    $('.sidebar.'+subClass).toggleClass('active');
});

https://jsfiddle.net/aua0wxm9/3/

jQuery ToggleClass优化和功能

3 个答案: