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

演示

Answer 2

一個簡單而簡單的方法是：

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

但是請注意，它有很多缺點，只是對您問題的一種直截了當的解決方案，必須對其進行調整以使其成為永久選擇。

編輯（以回答評論中的問題）：

當然，我知道不止1個，每個都取決於您的布局。 您可以：

a）代替“主體”部分，為想要切換事件一的任何元素選擇一個選擇器。 在具有少量大元素（與屏幕上的大小一樣）的布局上，這可以正常工作。

b）在“身體”部分添加另一個條件，在該位置您將獲得鼠標位置，並使用它來查看鼠標是否在所需位置。 您可以使用e.pageX / e.pageY進行此操作，也可以在此處找到與元素相關的相對位置jQuery，以獲取元素內的鼠標位置 。

Answer 3

您需要在文檔上設置一個單擊事件以關閉該框。 我試圖保持原始點擊功能不變。

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

http://jsfiddle.net/SCKhf/925/

Answer 4

這應該用更少的代碼來完成：

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

    var container = $(".togglecone");

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

});