jquery - 如何隐藏我的原始显示按钮并允许单击任意位置来隐藏我的内容？

Question

我想弄清楚如何隐藏我原来的显示按钮。然后做到这一点，当我点击页面上的任何地方时，它会隐藏显示按钮显示的原始内容。

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

            });

Answer 1

隐藏按钮后，您可以绑定到正文单击。

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

Answer 2

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

});