javascript - 切换侧边栏一次，在 block 之间切换并关闭

Question

我在这方面需要一些帮助。HTML

<div class="sidebar">
<ul>
    <li>
        <a href="{{URL::to('artworks')}}" class="action-link discover">
        <span class="action-icon discover-icon"></span>
        <span class="action-label">Discover</span></a>
    </li>
    <li>
        <a class="action-link viewlist disabled showlink">
        <span class="action-icon collection-icon"></span>
        <span class="action-label">ViewList</span></a>
    </li>
    <li>
        <a class="action-link filters showlink">
        <span class="action-icon filter-icon"></span>
        <span class="action-label">Filters</span></a>
    </li>
    <li>
        <a class="action-link share showlink">
        <span class="action-icon share-icon"></span>
        <span class="action-label">Share</span></a>
    </li>
</ul>
<div class="sidebar-content">
<div class="watchlist-content">
<h2>Watchlist</h2>
<ul>
    <li class="facebook"><a href="#"><span class="icon"></span></a></li>
    <li class="twitter"><a href="#"><span class="icon"></span></a></li>
    <li class="pinterest"><a href="#"><span class="icon"></span></a></li>
    <li class="google"><a href="#"><span class="icon"></span></a></li>
</ul>
</div>
<div class="share-content">
<h2>Share</h2>
<ul>
     <li class="facebook"><a href="#"><span class="icon"></span>Facebook</a></li>
     <li class="twitter"><a href="#"><span class="icon"></span>Twitter</a></li>
     <li class="pinterest"><a href="#"><span class="icon"></span>Pinterest</a></li>
     <li class="google"><a href="#"><span class="icon"></span>Google+</a></li>
</ul>
</div>
<div class="filters-content">
<h2>Filters</h2>
<ul class="core">
     <li class="cat-icon"><a href="list.html"><span class="icon"></span>Categories</a></li>
     <li class="artists-icon"><a href="artist.html"><span class="icon"></span>Artists</a></li>
     <li class="style-icon"><a><span class="icon"></span>Styles</a></li>
</ul>
</div>
</div>

还有我写得不好的Jquery

$('.filters').toggle(
    function(){
        if($('.share-content').is(':visible'))
            {
            $('.share-content').hide();
            $('.filters-content').show();
            }
        else{
            $('.filters-content').css({'display': 'block'}, {queue:false});
            $('.sidebar').stop().animate({left:'255px'}, {duration: 300, queue:false});
            $('.content-with-list').children().stop().animate({'margin-left':'255px'}, {duration: 300, queue:false});
            }
    },
    function()
    {
            $('.sidebar').stop().animate({left:'0'}, {duration: 300, queue:false});
            $('.content-with-list').children().stop().animate({'margin-left':'0'}, {duration: 300, queue:false});
    });


    $('.share').toggle(
    function()
    {
        if($('.filters-content').is(':visible'))
            {
            $('.filters-content').hide();
            $('.share-content').show();
            }
        else{
            $('.share-content').css({'display': 'block'}, {queue:false});
            $('.sidebar').stop().animate({left:'255px'}, {duration: 300, queue:false});
            $('.content-with-list').children().stop().animate({'margin-left':'255px'}, {duration: 300, queue:false});
            }
    },
    function()
    {
        $('.sidebar').stop().animate({left:'0'}, {duration: 300, queue:false});
        $('.content-with-list').children().stop().animate({'margin-left':'0'}, {duration: 300, queue:false});
    });

因此，尽管代码看起来很糟糕，但它只适用于两个 block ，但现在我需要添加第三个 block ，而我被困在这个 block 上。我真的很想知道如何编写代码，重复很少，并使我的侧边栏只打开一次在内容之间切换，然后如果单击相同的链接则关闭侧边栏。

提前感谢您的耐心等待。

Answer 1

jsBin demo

$('.sidebar li').click(function() {
    var el = $('.sidebar-content > div').eq( $(this).index() );
    check = el.is(':visible') ? el.hide() : ($('.sidebar-content > div').hide()) (el.show());
});