Onclick вне div, скрыть div

Я хочу скрыть div #startMnu, когда пользователь щелкает из div с именем .startBtn. Я не могу заставить это работать, используя этот учебник https://jsfiddle.net/KyleMit/tHCUB/, везде, где я нажимаю, он говорит, что он находится вне коробки.Onclick вне div, скрыть div

$(".startBtn").click(function() { 
    $(".startBtn").fadeToggle(200); 
    $("#startMnu").toggle(200); 
}); 

$("body").clickOff(function() {  
    alert('clickOff'); 
});

Эти последние строки кода являются единственными, которые изменились с javascript-части в jsfiddle.

Я пытаюсь создать меню, в котором вы можете нажать кнопку меню, чтобы открыть его, и закройте его, нажав кнопку еще раз, или щелкнув мышью на div. Прямо сейчас предупреждение появляется везде, где я нажимаю. Идеи?

Edit:

//Effects.js 
$(function() { 
    $(".startBtn").click(function() { 
    $(".startBtn").fadeToggle(200); 
    $("#startMnu").toggle(200); 
    }); 
}); 
$.fn.clickOff = function(callback, selfDestroy) { 
    var clicked = false; 
    var parent = this; 
    var destroy = selfDestroy || true; 

    parent.click(function() { 
    clicked = true; 
    }); 

    $(document).click(function(event) { 
    if (!clicked) { 
     callback(parent, event); 
    } 
    if (destroy) { 
     //parent.clickOff = function() {}; 
     //parent.off("click"); 
     //$(document).off("click"); 
     //parent.off("clickOff"); 
    }; 
    clicked = false; 
    }); 
}; 

$(".startBtn").click(function(event) { 
    event.stopPropagation(); 
    $("#startMnu").toggle(); 
}); 

$("body").click(function() { 
    $("#startMnu").hide(); 
});

/* effects.css */ 

#startBtn { 
    position: absolute; 
    transition: all ease 200ms; 
} 
#startBtn:hover { 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 
#startBtnHvr { 
    display: none; 
    position: absolute; 
    transition: all ease 0ms; 
} 
.startBtn { 
    width: 64px; 
    height: 64px; 
} 
/* style.css */ 

body { 
    background-image: url("background.png") no-repeat center center fixed; 
    overflow: hidden; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
p, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-family: Tahoma, Geneva, sans-serif; 
    color: #333; 
} 
#startMnu { 
    display: none; 
    padding: 280px 180px; 
    background: linear-gradient(to bottom right, rgba(86, 11, 3, .8), rgba(4, 74, 100, .8)); 
    /* Standard syntax */ 
    float: left; 
    position: absolute; 
    border-radius: 1px; 
    border: 2px solid #333; 
    margin-left: -8px; 
    margin-top: 100px; 
}

<!DOCTYPE HTML> 
<html> 

<head> 
    <title>Online OS</title> 
    <link rel="icon" type="image/png" href="ico_default.png"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="effects.js"></script> 
    <link href="effects.css" rel="stylesheet" type="text/css" id="sheet1"> 
    <link href="style.css" rel="stylesheet" type="text/css" id="sheet1"> 
</head> 

<body> 
    <img id="startBtn" class="startBtn" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/2000px-Circle_-_black_simple.svg.png" alt="" /> 
    <img id="startBtnHvr" class="startBtn" src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/C/R/CR210.jpg" alt="" /> 
    <div id="startMnu"> 
    <h2 style=" float:left; position:absolute; margin-left:-95px; margin-top:-270px;" class="rename">Popup<h2> 
    </div> 
</body> 
</html>

Это то, что я имею в виду, незначительные ошибки, но во фрагменте кода.

источник

2016-05-18 Akidus

попробовать это '$ ("startBtn.") Нажмите (функция() { . \t $ (". StartBtn"). FadeToggle (200); \t $ ("# startMnu") .переключатель (200); }); $ (": not (.startBtn)"). Click (function() { \t alert ('clickOff'); }); ' – guradio

Если вы хотите спрятать, вы можете просто сделать' $ ("# startMnu") .hide(); ' – SiddP

$ (" body "). clickOff (используйте идентификатор div вместо тела – Poria

Попробуйте

$(".startBtn").click(function(event) { 
 
    event.stopPropagation(); 
 
    $("#startMenu").slideToggle("slow"); 
 
}); 
 

 
$("#startMenu").click(function(event) { 
 
    event.stopPropagation(); 
 
}); 
 

 
$("body").click(function() { 
 
    $("#startMenu").slideUp("slow"); 
 
});

#startMenu { 
 
    background: red; 
 
    height: 100px; 
 
    width: 100px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="startBtn">Menu</button> 
 
<br><br> 
 
<div id="startMenu">startMnu</div>

источник

2016-05-18 05:13:17

Хорошо, но нажатие на меню «всплывающее окно» также отключает его У меня были кнопки на нем. – Akidus

Я обновил свой код. пожалуйста, проверьте его –

Это работает, но не тогда, когда я копирую его в свой код. Работает только в этом фрагменте. – Akidus

Вы можете установить прослушиватель событий на HTML, чтобы скрыть его и использовать stopPropagation(), чтобы игнорировать, что один при нажатии на .startBtn

$('html').click(function() { 
    alert('clickOff'); 
}); 

$(".startBtn").click(function(event){ 
    event.stopPropagation(); 
    $(".startBtn").fadeToggle(200); 
    $("#startMnu").toggle(200); 
});

источник

2016-05-18 05:14:31

Это хорошо, но по моему, он переключается, когда я нажимаю, – Akidus

$(".startBtn").click(function() { 
 
    $(".startBtn").fadeToggle(200); 
 
    $("#startMnu").toggle(200); 
 
}); 
 

 
$("body").click(function(event) { 
 
    if(!$(event.target).closest('#startMnu').length && !$(event.target).closest('.startBtn').length) { 
 
     $(".startBtn").fadeToggle(200); 
 
     $("#startMnu").toggle(200); 
 
    } 
 
});

.menu { 
 
    position: relative; 
 
    min-height: 60px; 
 
} 
 
#startMnu { 
 
    background: #ffc501; 
 
    position: absolute; 
 
    list-style: none; 
 
    width: 320px; 
 
    display: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    top: 100%; 
 
    left: 0; 
 
} 
 

 
#startMnu li a { 
 
    text-decoration: none; 
 
    padding: 3px 8px; 
 
    display: block; 
 
    color: #fff; 
 
} 
 

 
#startMnu li a:hover { 
 
    background: #ffe501; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<nav class="menu"> 
 
    <button class="startBtn">Opener</button> 
 
    <ul id="startMnu"> 
 
    <li><a href="#">Menu Item 1</a></li> 
 
    <li><a href="#">Menu Item 2</a></li> 
 
    <li><a href="#">Menu Item 3</a></li> 
 
    <li><a href="#">Menu Item 4</a></li> 
 
    <li><a href="#">Menu Item 5</a></li> 
 
    </ul> 
 
</nav>

источник

2016-05-18 05:28:33

Да, но кнопка скрывается, и тело также переключает ее. – Akidus

Лучшего способ избежать ненужной обработки событий, чтобы связать тело нажмите внутри меню выберите, например, так:

//persist your current menu state 
var open = false; 

function clickOn() { 

    //force open the menu rather than toggle 
    //so you are in control of the state 
    $(".startBtn").fadeOut(200); 
    $("#startMnu").fadeIn(200); 

    open = true; 

    //bind the body click 
    $("body").on("click.menu", function(event) { 
     clickOff(event); 
    }); 
} 

function clickOff() { 
    $(".startBtn").fadeIn(200); 
    $("#startMnu").fadeOut(200); 

    open = false; 

    //unbind the body click so it doesn't happen when the menu is closed 
    $("body").unbind("click.menu"); 
} 

$(".startBtn").click(function(e) { 
    //stop the event bubbling up to the body 
    e.stopPropagation(); 

    //check the current state 
    open ? clickOff() : clickOn(); 
});

источник

2016-05-19 09:31:25 DoubleA

Если это все JQuery, в котором я нуждаюсь, это не сработает. Я все еще изучаю его, и если мне нужно добавить op-часть jsfiddle для работы. – Akidus

должен работать, возможно, это было потому, что тело не было на 100%. Попробуйте эту скрипту: https://jsfiddle.net/tHCUB/132/ – DoubleA

Это предполагает, что вы искали то, что щелчок по элементу вызывает функцию открытия или закрытия, в то время как щелчок нигде не на элементе вызывает функцию закрытия в то время как элемент открыт, но в остальном ничего не делает. – DoubleA

Onclick вне div, скрыть div

ответ

Смежные вопросы