Question

我使用jquery用按钮来翻译内容，我想在我点击内容时隐藏内容＆＃34; contentcone＆＃34; 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

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

但请注意它有很多缺点，只是对你的问题的直接解决方案，它必须经过调整才能成为永久的选择。

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

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

a）而不是＆＃34;身体＆＃34;部分，为要切换事件一的任何元素创建一个选择器。这适用于具有少量大（屏幕大小）元素的布局。

b）在＆＃34;身体中再添加一个条件＆＃34;部分，您获得鼠标位置并使用它来查看鼠标是否在您想要的位置。您可以使用e.pageX / e.pageY执行此操作，或者您可以在jQuery get mouse position within an element找到相对于元素的相对位置。

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

});

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

4 个答案: