如何隐藏我的原始演出按钮并允许点击任何位置以隐藏我的内容？

Question

我想弄清楚如何隐藏我原来的显示按钮。然后，当我点击页面上的任意位置时隐藏原来由show按钮显示的原创内容。

<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 demo

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

});