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});
    });

所以，即使代码看起来很糟糕，它仍然可以使用两个块，但现在我需要添加第三个，我就会坚持这个。我真的很想知道如何重复编写代码并使我侧边栏仅在内容之间切换一次，然后在单击相同链接时关闭侧边栏。

感谢您提前耐心等待。

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());
});

切换侧边栏一次，在块之间切换并关闭

1 个答案:

jsBin demo