如何在jQuery中單擊其他元素時觸發元素的事件？

這裏是我的代碼：https://jsfiddle.net/2vvLe0ko/2/如何在jQuery中單擊其他元素時觸發元素的事件？

我想隱藏與class droppointercontainer div當用戶點擊除了點擊我之外的任何其他區域！ DIV。並在用戶點擊點擊我時顯示droppointercontainer div！ 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); 
});

來源

2017-07-25 Rahul

你需要調用一個功能來完成所有點擊的工作...

編輯並添加了工作證明鏈接。

$("#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/

來源

2017-07-25 18:02:09 Eric

但是，如果我們點擊文檔中的任何其他元素（除了點擊我），droppointercontainer div應該被隱藏！ DIV。 – Rahul

修正了它，再試一次 – Eric

像這樣的東西應該工作

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

來源

2017-07-25 18:01:57 CumminUp07

什麼是函數參數中的「e」？ – Rahul

它是'event'對象，它會自動從'.click（）' – CumminUp07

傳遞給函數，它似乎不能正常工作，如果您單擊第一次單擊我！ div然後點擊我！不能在一個單一的點擊！ – Rahul

你需要切換他們。對於你可以使用一個變量爲每個：

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

來源

2017-07-25 18:03:35 ItamarG3

但是如果我們點擊文檔中除了點擊我之外的其他元素，droppointercontainer div應該被隱藏！ DIV。 – Rahul

然後將其全部包裝在一個div中，並給它一個OnClick ... – ItamarG3

你能提供jsfiddle嗎？ – Rahul

這是你在找什麼？

$(document).click(function(event) { 
 
\t $(".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>

來源

2017-07-25 18:55:18

jsfiddle url https://jsfiddle.net/utkarsh27a/dtr0xp2p/1/ –

爲了簡單起見，我會去透明覆蓋。當您點擊疊加層時，下拉菜單消失。見小提琴這裏：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(); 
});

一個優點這種解決方案的是，它的簡單，當你點擊一個ITEN下拉保持打開狀態。除非你告訴他當然關閉，但這是另一回事:)

來源

2017-07-25 19:13:21

如何在jQuery中單擊其他元素時觸發元素的事件？

回答

相關問題