Question

当用户点击除点击我之外的任何其他区域时，我想用class droppointercontainer隐藏div！ DIV。并在用户点击我点击时显示droppointercontainer div！格。

如何用jQuery做到这一点？

HTML：

<body>
  <div class="click" id="click1">click me!
                      <div class="droppointercontainer" id="droppointercontainer1">
                        <div class="droppointer"></div>
                        <div class="dropmenu" id="dropmenu1">
                            <h4>option1</h4>
                            <h4>option2</h4>
                            <h4>option3</h4>
                        </div>
                        <div class="dropmenutop"></div>
                    </div>
  </div>
  <div class = "click" id="click2">click me!
                      <div class="droppointercontainer" id="droppointercontainer2">
                        <div class="droppointer"></div>
                        <div class="dropmenu" id="dropmenu1">
                            <h4>option1</h4>
                            <h4>option2</h4>
                            <h4>option3</h4>
                        </div>
                        <div class="dropmenutop"></div>
                    </div>
  </div>
   <div class = "static">Iam just  a tatic div</div>
   <div class = "static">Iam just  a tatic div</div>
   <div class = "static">Iam just  a tatic div</div>
</body>

的CSS：

.click{
  display:inline-block;
  margin: 10px;
  padding: 10px;
  background-color: purple;
  color: white;
}
.static{
  background-color:steelblue;
  height: 100px;
}
.droppointer{
  /*display: none;*/
  position: absolute;
  margin: 0 auto;
  width: 0;
  right: 0;
  border: 10px solid transparent;
  border-bottom: 10px solid #efefef;
  border-top: 0px; 
  z-index: 200;
}
.droppointercontainer{
  display:none;
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: blue;
}
.dropmenutop{
  /*display: none;*/
  background-color: transparent;
  position: absolute;
  height: 10px;
  left: 0;
  right: 0;
  z-index: 199;
}
.dropmenu{
  /*display: none;*/
  box-shadow: 0 0 15px #888888;
  background-color: #efefef;
  position: absolute;
  margin-top: 10px;
  min-height: 20px;
  left: 0px;
  right: 0px;
  z-index: 199;
}
h4{
  color:black;
}

的javascript：

$("#click1").on("click", function(){
    $(this).children("#droppointercontainer1").fadeIn(200);
});
$("#click2").on("click", function(){
    $(this).children("#droppointercontainer2").fadeIn(200);
});

Answer 1

这样的事情应该有效

  $(document).click(function(e) {
    if (!$(e.target).is("#click1") && !$(e.target).is("#click2")) {
        if ($('#click1').is(':visible') || $('#click2').is(':visible')) {
            $(".droppointercontainer").hide();
        }
    }

Answer 2

你需要调用一个能够完成所有点击工作的函数......

编辑并添加了工作校对链接。

$("#click1").on("click", function(){
    showMe(this);
});
$("#click2").on("click", function(){
     showMe(this);
});

$(document).on('click', function(__e){  
    if(!$(__e.target).hasClass('click')){
         $('.droppointercontainer').fadeOut(200);  
    }       
});

function showMe(__obj){
  $('.droppointercontainer').each(function(__idx, __el){
        if($(__el)[0] !== $(__obj).children('.droppointercontainer:first')[0]){
        if($(__el).css('opacity') >  0){
        $(__el).fadeOut(200);
      }
    }
});
$(__obj).children('.droppointercontainer:first').fadeIn(200);   
}

证明

https://jsfiddle.net/2vvLe0ko/7/

Answer 3

您需要切换它们。为此，您可以为每个使用变量：

var drop1,drop2=false;
$("#click1").on("click", function(){
    drop1 ? $(this).children("#droppointercontainer1").fadeOut(200) : 
        $(this).children("#droppointercontainer1").fadeIn(200);
    $("#droppointercontainer2").fadeOut(200);
    drop1 = !drop1;
    drop2=false;
    });
    $("#click2").on("click", function(){
        drop2 ? $(this).children("#droppointercontainer2").fadeOut(200) : 
        $(this).children("#droppointercontainer2").fadeIn(200);
    $("#droppointercontainer1").fadeOut(200);
    drop1=false;
    drop2 = !drop2;
});

Answer 4

这是你要找的吗？

$(document).click(function(event) {
	$(".droppointercontainer").hide();
  if($(event.target).is(".click")) {
    $(event.target).find(".droppointercontainer").show();
  }
})

.click{
  display:inline-block;
  margin: 10px;
  padding: 10px;
  background-color: purple;
  color: white;
}
.static{
  background-color:steelblue;
  height: 100px;
}
.droppointer{
  /*display: none;*/
  position: absolute;
  margin: 0 auto;
  width: 0;
  right: 0;
  border: 10px solid transparent;
  border-bottom: 10px solid #efefef;
  border-top: 0px; 
  z-index: 200;
}
.droppointercontainer{
  display:none;
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: blue;
}
.dropmenutop{
  /*display: none;*/
  background-color: transparent;
  position: absolute;
  height: 10px;
  left: 0;
  right: 0;
  z-index: 199;
}
.dropmenu{
  /*display: none;*/
  box-shadow: 0 0 15px #888888;
  background-color: #efefef;
  position: absolute;
  margin-top: 10px;
  min-height: 20px;
  left: 0px;
  right: 0px;
  z-index: 199;
}
h4{
  color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click" id="click1">click me!
                      <div class="droppointercontainer" id="droppointercontainer1">
                        <div class="droppointer"></div>
                        <div class="dropmenu" id="dropmenu1">
                            <h4>option1</h4>
                            <h4>option2</h4>
                            <h4>option3</h4>
                        </div>
                        <div class="dropmenutop"></div>
                    </div>
  </div>
  <div class = "click" id="click2">click me!
                      <div class="droppointercontainer" id="droppointercontainer2">
                        <div class="droppointer"></div>
                        <div class="dropmenu" id="dropmenu1">
                            <h4>option1</h4>
                            <h4>option2</h4>
                            <h4>option3</h4>
                        </div>
                        <div class="dropmenutop"></div>
                    </div>
  </div>
   <div class="static">Iam just  a tatic div</div>
   <div class="static">Iam just  a tatic div</div>
   <div class="static">Iam just  a tatic div</div>

Answer 5

为了简单起见，我会选择透明覆盖。单击叠加层时，下拉列表将消失。请参阅此处的小提琴：https://jsfiddle.net/d6yv60od/

$(".click").on("click", function(){
  $('body').append('<div class="overlay"></div>');
  $(this).children(".droppointercontainer").fadeIn();
});
$('body').on('click', '.overlay', function() {
  $(this).remove();
  $(".droppointercontainer").fadeOut();
});

此解决方案的一个优点是，简单来说，当您单击它时，下拉列表仍保持打开状态。除非你告诉他当然要结束，但这是另一个故事：）

如何在jQuery中单击其他元素时触发元素的事件？

5 个答案: