javascript - 使用jquery点击外部div时隐藏内容

Question

我正在使用 jquery 通过按钮切换内容，我想在单击“contentcone”div 外部时隐藏内容。 HTML 如下

<div class="togglecone">
        </div>
        <div class="contentcone">
            <div class="contentleft">
                <div class="title">
                Cone
                </div>
                <div class="maincopy">
                Hello my friends this is a really nice cone that can be placed anywhere
                </div>
                <a href="https://www.mcnicholas.co.uk/" class="button">
                View on website
                </a>
            </div>
            <div class="contentright"> <img src="images/cone.png" alt=""/>
    </div>
</div>

这是脚本

 $(document).ready(function(){
      var $content = $(".contentcone").hide();
    $(".togglecone").on("click", function(e){
    $(this).toggleClass("expandedcone");
    $content.slideToggle();
    });
    });

http://jsfiddle.net/thomastalavera/SCKhf/914/

Answer 1

这应该可以做到:

$(document).ready(function(){
    var $content = $(".contentcone").hide();
    $(document).on("click", function(e) { 
        if( $(e.target).is(".togglecone") ) {       
            $(this).toggleClass("expandedcone");                                        
            $content.slideToggle();

        } else {
            $content.slideUp();
        }
    });
});

DEMO