Javascript 使用jquery在div外部单击时隐藏内容

我使用jquery通过一个按钮切换内容，我想在我的“contentcone”分区外单击时隐藏内容

<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){  
      e.stopImmediatePropagation();
      $(this).toggleClass("expandedcone");
      $content.slideToggle();
   });
   $("body").on("click", function(e){
       if ($(".contentcone").is(':visible')) {
          $(".togglecone").click();
       }
   });
   $(".contentcone").on("click", function(e){
      e.stopImmediatePropagation();
      return false;
   })
 });

但请注意，它有很多缺点，只是一个直截了当的解决方案，你的问题，它必须调整，以确定作为一个永久的选择

编辑（回答评论中的问题）：

当然，我知道不止一个，每个都取决于你的布局。你可以：

a） 代替“主体”部分，为要切换事件1的任何元素创建选择器。这适用于包含少量大元素（如屏幕上的大小）的布局

b） 在“身体”部分添加一个条件，在这里您可以获得鼠标位置，并使用它查看鼠标是否位于您想要的位置。您可以使用e.pageX/e.pageY执行此操作，也可以在此处找到元素的相关相对位置。

这应该可以做到：

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

---

您需要在文档上设置单击事件以关闭该框。我试图保持你原来的点击功能完好无损

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

  $(this).on('click', function(e) {
    if ($(e.target).is('.togglecone')) { // don't slide up if you click the cone
      return;
    }
    if ($(".togglecone").hasClass('expandedcone')) {
      $content.slideUp();
      $(this).removeClass("expandedcone");
    }
  });
});

---

这应该使用较少的代码：

$(document).mousedown(function (e) {

    var container = $(".togglecone");

    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.fadeOut('slow');
    }

});

---

已编辑以修复始终打开的问题。感谢您的回答。我认为这个解决方案真的解决了这个问题，我想图标改变颜色尽快切换被激活或停用。我唯一不知道如何解决的问题是，如果我单击屏幕上的任意位置，而不仅仅是div的右侧，则停止传播。您知道解决方法吗？谢谢allot的回答，只有一个问题。有没有办法改变开关的颜色，使其关闭时为黑色，打开时为绿色？我不确定是否完全理解您的问题，但您可以告诉我们：.css（…）。。。更改任何CSS。

$(document).mousedown(function (e) {

    var container = $(".togglecone");

    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.fadeOut('slow');
    }

});