1

我需要一些帮助。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});
    });

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

提前感谢您的耐心等待。

4

1 回答 1

2

jsBin 演示

$('.sidebar li').click(function() {
    var el = $('.sidebar-content > div').eq( $(this).index() );
    check = el.is(':visible') ? el.hide() : ($('.sidebar-content > div').hide()) (el.show());
});
于 2012-11-17T06:16:20.387 回答