затваряне на поле jq

dunix

Registered
Как да го направя като цъкнеш някъде извън полето да го затваря.
Помъчих се да направя нещо, но уви само го прецаках и не щеше да работи :(
[js]function toggle() {
var ele = document.getElementById("toggleText");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
} [/js]

HTML:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a id="displayText" href="javascript:toggle();">ms</a>
<div id="toggleText" style="display: none;">text</div>
 
Код:
$(document).ready(function () {
    
    //Kато се цъкне на линка
    $("#displayText").click(function () {
        
        //Се показва или скрива дива.
        $("#toggleText").slideToggle();
    });
});

//Да се затваря, когато е цъкнато извън него.
//Ползва се mouseup event-a.
$(document).mouseup(function (e) {
    
    // Избираш си кой елемент 
    var container = $('#toggleText');
    
    //проверяваш дали е цъкнато върху него
    if (container.is(e.target).length === 0) {
        
        //Скриваш дивчето.
        $("#toggleText").slideUp();
    }
});

Демо: http://jsfiddle.net/67Far/1/
 
На двете места не работи.

Като натисна на MS ми отваря и затваря toggleText, но като натисна някъде другаде не го затваря
 
Fakeheal каза:
dunix каза:
Как да го направя като цъкнеш някъде извън полето да го затваря

Нали това искаш?

Да, забравил съм да напиша междуметието "не". Редактирах си поста.


dunix каза:
Като натисна на MS ми отваря и затваря toggleText, но като натисна някъде другаде не го затваря
 
Fakeheal каза:
Искаш като цъкнеш на MS да ти го отваря, а като го цъкнеш другаде да ти го затваря само? Така ли?

като цъкаш на MS да се отваря/затваря #toggleText и ако цъкнеш някъде извън #toggleText пак да се затваря.
 
Пробвай с това:
Демо: http://jsfiddle.net/67Far/3/
Код:
$(document).ready(function () {

    //Kато се цъкне на линка
    $("#displayText").click(function () {

        //Се показва или скрива дива.
        $("#toggleText").stop().slideToggle();
    });
});

//Да се затваря, когато е цъкнато извън него.
//Ползва се mouseup event-a.
$(document).mouseup(function (e) {

    // Избираш си кой елемент 
    var container = $('#toggleText');
    //проверяваш дали е цъкнато върхо него
    if (!container.is(e.target) || !e.is("#displayText")) {
        console.log(e);
        //Скривашдивчето.
        $("#toggleText").stop().slideUp();
    }
});
 
Сега работи и на демото и при мен, но прави един бъг.

Когато го отворя и след това го затворя от същото място (#displayText) и искам отново да го отворя без да съм презаредил страницата не го отваря. Не се получава ако го затворя като цъкна извън #toggleText, a само когато се пробвам да го отворя повторно от #displayText. От какво може да се получава?



ПС: това го няма като проблем на демото.
 

Back
Горе