2

元の表示ボタンを非表示にする方法を見つけようとしています。次に、ページのどこかをクリックすると、元は表示ボタンで表示されていたコンテンツが非表示になるようにします。 

<script>
    $(function(){

        $(".content").hide();
        $('.more-btn').click(function(){
           $(this).parent().parent().siblings('.content').show();
           $(this).hide();
        });

    });
</script>

ここにHTMLがあります

<section>
    <article class="toggle-box" id="toggle1">
        <aside class="info-rollover">
            <h3>Locavores</h3>
            <button class="more-btn">Show More</button>
        </aside>
    </article>
    <aside class="content">
        <img src="images/loca/1.jpg"/>
        <img src="images/loca/2.jpg"/>
        <img src="images/loca/3.jpg"/>
        <img src="images/loca/4.jpg"/>
        <img src="images/loca/5.jpg"/>
        <img src="images/loca/6.jpg"/>
        <img src="images/loca/7.jpg"/>
        <img src="images/loca/8.jpg"/>
        <img src="images/loca/9.jpg"/>
    </aside>
</section>

クリックコードで新しい非表示ショー

                   $(document).click(function(){
                    $('.content:visible').hide();
                    $('.content>img:hidden').show(),$('body').css('cursor', 'default');
                    });

            });
4

2 に答える 2

0

jsBin デモ

$(function(){

    $(".content").hide();
    $('.more-btn').click(function( e ){
       e.stopPropagation(); // to lower "DOM layers"
       $(this).closest('section').find('.content').show();
       $(this).hide();
    });

    $(document).click(function(){
      $('.content:visible').hide();
      $('.more-btn:hidden').show();
    });

});
于 2012-11-26T04:10:50.537 に答える
0

ボタンを非表示にすると、ボディクリックにバインドできます。

$( '.more-btn').click( function(){
  var button=$( this ).hide(),
  content= $('.content' ).show();
  $( 'body' ).bind( 'click.more', function( e ){
    $( this ).unbind( 'click.more' );
    button.show();
    content.hide();
  });
});
于 2012-11-26T04:05:45.023 に答える