位置Div onClick，並在外部點擊時隱藏

我有一個隱藏在屏幕上的div .toggleBox。當點擊一個input我的JavaScript可以顯示.toggleBox div，但我不知道如何再次隱藏div，如果點擊.toggleBox div以外的任何地方。位置Div onClick，並在外部點擊時隱藏

我想切換方塊，使其隱藏或顯示取決於它的當前狀態以及點擊發生在.toggleBox之內還是在其外部。

這裏是一個小提琴http://jsfiddle.net/SJVz5/

這裏是HTML，JavaScript和CSS：

HTML：

<div class="container"> 
    <label for="myInput">Click in input</label> 
    <input type="text" class="js-input" id="myInput" /> 
    <div class="toggleBox"> 
     Some information 
    </div> 
</div>

的JavaScript：

$('.js-input').click(function() { 
    $('.toggleBox').css({ 
     top : 22 + 'px', 
     left : 91 + 'px' 
    }); 
});

CSS：

.container { 
    position: relative; 
} 

.toggleBox { 
    position: absolute; 
    top: -99999px; 
    left: 99999px; 
    padding: 15px;; 
    border: 1px solid black; 
}

來源

2014-05-11 Mdd

篩選http://jsfiddle.net/j08691/SJVz5/2/？ – j08691

幾乎，如果點擊'.toggleBox' div它不應該被隱藏。 – Mdd

我已經更新您的腳本，請看看這個：http://jsfiddle.net/SJVz5/3/，我希望這是你想要

你必須添加event.stopPropagation();

來源

2014-05-11 03:04:50 user3586378

這很好用！我不知道event.stopPropagation（）。我可以問，爲什麼'toggleBox'有一個包含'$（this）.show（）'的.click（）方法？既然它已經顯示可以被刪除或我錯過了什麼？非常感謝！ – Mdd

看來我有點晚了，但我有一個更簡單的答案用較短的代碼 http://jsfiddle.net/Godinall/SJVz5/4/

$('html').click(function() { 
    $('.toggleBox').toggle().css({ 
     top: 22 + 'px', 
     left: 91 + 'px' 
    }); 
}); 

$('.toggleBox').click(function (event) { 
    event.stopPropagation(); 
});

來源

2014-05-11 03:15:05 Godinall

謝謝！我只是評論，並不熟悉'event.stopPropagation（）'。我搜索了一段時間，看到了一個名爲'.toggle（）'的舊jQuery方法，它可能對我有幫助，但不推薦使用。謝謝！ – Mdd

@Mdd你錯誤地認爲兩個切換（）。一個像你說的那樣被棄用，這是一種方法（JQuery API），另一個是顯示/隱藏元素的動畫效果，這正是最適合你需要的元素。看到這裏http://api.jquery.com/toggle/它仍然是活躍的，你可以從演示中看出，因爲你正在使用最新的JQuery庫，顯然這個演示很有效！ – Godinall

謝謝Godinall！ – Mdd

位置Div onClick，並在外部點擊時隱藏

回答

相關問題