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

そのため、コードはひどいように見えますが、2 つのブロックで機能していましたが、3 つ目のブロックを追加する必要があり、このブロックで立ち往生しています。少し繰り返してコードを作成し、サイドバーのみを開く方法を本当に知りたいです。コンテンツ間を移動してから、同じリンクがクリックされた場合はサイドバーを閉じます。

あらかじめご了承いただきますようお願い申し上げます。

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 に答える