Как я могу заставить свою кнопку работать с остальной частью моего javascript?

Я пытаюсь сделать кнопку, из которой открывается раскрывающееся меню. Я хочу, чтобы пользователь мог отключить всплывающее меню, нажав кнопку еще раз или щелкнув вне меню. С помощью моего текущего кода я могу использовать кнопку, чтобы открыть раскрывающееся меню, но кнопка перестает работать после слов. Выход из меню, щелкнув за пределами меню, работает отлично. Как я могу получить кнопку, чтобы остаться работать после открытия менюКак я могу заставить свою кнопку работать с остальной частью моего javascript?

Вот мой код:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body{ margin:0px; background:#999; } 
div#topbar > #sections_panel{ 
    position:absolute; 
    height:0px; 
    width:550px; 
    background:#000; 
    top:60px; 
    left:0px; 
    border-radius:0px 0px 8px 8px; 
    overflow:hidden; 
    z-index:10000; 
} 
div#topbar > #sections_panel > div{ 
    background:#333; 
    padding:20px; 
    height:238px; 
    margin:10px; 
    color:#FC0; 
} 
</style> 
<script> 
function toggleNavPanel(x){ 
    var panel = document.getElementById(x), maxH="300px"; 
    var box = document.getElementById('sections_panel') 

    if(panel.style.height == maxH){ 
     panel.style.height = "0px"; 
    } else { 
     panel.style.height = maxH; 
    } 

window.addEventListener('mouseup', function(event){ 
     if(event.target != box && event.target.parentNode !=box){ 
      panel.style.height = "0px"; 

     } 
}); 
} 


</script> 
</head> 
<body> 
<div id="topbar"> 
    <div id="logo">LOGO</div> 
    <div id="sections_btn_holder"> 
    <button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">&#9662;</span></button> 
    </div> 
    <div id="sections_panel"> 
    <div> 
     Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc... This area can display way more than just menu buttons or links. You will see a lot of modern sites even adding graphics, icons, animations and images to their drop down menus nowadays. So get creative partner. 
    </div> 
    </div> 
</div> 
</body> 
</html>

Новый код для нескольких кнопок (для тех, кто заинтересован в этом несколько кнопок):

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body{ margin:0px; background:#999; } 
div#topbar > #sections_panel{ 
    position:absolute; 
    height:0px; 
    width:550px; 
    background:#000; 
    top:200px; 
    left:0px; 
    border-radius:0px 0px 8px 8px; 
    overflow:hidden; 
    z-index:10000; 
} 
div#topbar > #sections_panel > div{ 
    background:#333; 
    padding:20px; 
    height:238px; 
    margin:10px; 
    color:#FC0; 
} 

div#topbar1 > #sections_panel1{ 
    position:absolute; 
    height:0px; 
    width:550px; 
    background:#000; 
    top:250px; 
    left:0px; 
    border-radius:0px 0px 8px 8px; 
    overflow:hidden; 
    z-index:10000; 
} 
div#topbar1 > #sections_panel1 > div{ 
    background:#333; 
    padding:20px; 
    height:238px; 
    margin:10px; 
    color:#FC0; 
} 
</style> 
<script> 
function toggleNavPanel(dropDivId, height, btnId){ 
    var panel = document.getElementById(dropDivId), maxH= height, nav = btnId; 
    if(panel.style.height == maxH){ 
     panel.style.height = "0px"; 
    } else { 
     panel.style.height = maxH; 
    } 
window.addEventListener('mouseup', function(event){ 
     if(event.target != panel && event.target.parentNode !=panel && event.target.id != nav){ 
      panel.style.height = "0px"; 
     } 
}); 
} 
</script> 


</head> 
<body> 
<div id="topbar"> 
    <div id="logo">LOGO</div> 
    <div id="sections_btn_holder"> 
    <button id="nav2" onclick="toggleNavPanel('sections_panel', '300px','nav2')">Navigator &#9662;</button> 
    </div> 
    <div id="sections_panel"> 
    <div> 
     hahahahaha 
    </div> 
    </div> 
</div> 

<div id="topbar1"> 
    <div id="logo1">LOGO</div> 
    <div id="sections_btn_holder1"> 
    <button id="nav1" onclick="toggleNavPanel('sections_panel1', '300px','nav1')">Navigator &#9662;</button> 
    </div> 
    <div id="sections_panel1"> 
    <div> 
     hahahahaha 
    </div> 
    </div> 
</div> 
</body> 
</html>

источник

2016-01-06 INeedHelp

Причина: Когда вы нажимаете кнопку, и события увольняются.

Обработчик события MouseUp называется первым, закрывая меню.
Обработчик события OnClick называется следующим, обнаруживая, что меню закрыто, и, следовательно, снова открывает его.

В современных браузерах все это происходит без сбоев; казалось, ничего не произошло.

Решение: Добавить условие в обработчик события MouseUp:

if (event.target != box && event.target.parentNode !=box && event.target.tagName != "BUTTON"){

или

if (event.target != box && event.target.parentNode != box && event.target !== nav){

Для последнего подхода к работе, вам нужно дать кнопку идентификатор:

<button id="nav" onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">&#9662;</span></button>

источник

2016-01-06 12:14:01

Спасибо, я бы предложил вам показать свое приложение но они еще не подсчитаны, так что вот счастливое лицо: D. Очень полезно! – INeedHelp

Если ответ решил вашу проблему, пожалуйста, [принять] (http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) ответ. Если это не решит вашу проблему, пожалуйста, сообщите мне, чтобы я мог поработать над этим. –

О, я не знал, что смогу «принять» ответ. Да, это решило мою проблему, Еще раз спасибо! – INeedHelp

Как я могу заставить свою кнопку работать с остальной частью моего javascript?

ответ

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