#javascript #html #css
#javascript #HTML #css
Вопрос:
Я создал меню навигации, которое работает хорошо, однако оно остается включенным до тех пор, пока мышь не выйдет из выпадающего списка.
У меня уже есть функция, которая отображает содержимое в другом <div> (otherDiv), когда мы выбираем что-то в меню, и я пытаюсь одновременно скрыть меню.
function go(obj) {
var page = obj.href;
document.getElementById('otherDiv').innerHTML = '<img src="' page '"></img>'
return false;
document.getElementById('menu1').style.display = "none";
document.getElementById('menu2').style.display = "none";
document.getElementById('menu3').style.display = "none";
document.getElementById('menu4').style.display = "none";
document.getElementById('menu5').style.display = "none";
document.getElementById('menu6').style.display = "none";
} .drpbtn {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 12px 25px;
list-style-type: none;
width: auto;
margin: 0;
background-color: #403e3e;
color: #ffffff;
float: left;
font-family: arial;
font-size: 14px;
}
.drpbtn:hover {
background-color: #00b3be;
}
.drpbtn:hover .dropdown-content {
display: inline-block;
}
.dropdown-content {
display: none;
list-style-type: none;
position: absolute;
background-color: #fafafa;
width: 290px;
color: #000000;
text-align: left;
margin-left: -4.7em;
margin-top: 0.89em;
}
.dropdown-content li:hover {
background-color: #e1e1e1;
}
.dropdown-content li {
display: block;
}
.li-drop {
display: inline-block;
color: #000000;
text-align: left;
padding: 11px 13px;
text-decoration: none;
margin: auto;
} <div id="menu">
<ul>
<li class="drpbtn">Menu 1
<ul id="menu1">
<div class="dropdown-content">
<li class="li-drop">
<a href="url" onclick="return go(this);">
<div class="div-drop">Choice 1</div>
</a>
</li>
<li class="li-drop">
<a href="url" onclick="return go(this);">
<div class="div-drop">Choice 2</div>
</a>
</li>
<li class="li-drop">
<a href="url" onclick="return go(this);">
<div class="div-drop">Choice 3</div>
</a>
</li>
</div>
</ul>
</li>
<li class="drpbtn">Menu 2
<ul id="menu2">
<div class="dropdown-content">
<li class="li-drop">
<a href="url" onclick="return go(this);">
<div class="div-drop">Choice 1</div>
</a>
</li>
<li class="li-drop">
<a href="url" onclick="return go(this);">
<div class="div-drop">Choice 2</div>
</a>
</li>
<li class="li-drop">
<a href="url" onclick="return go(this);">
<div class="div-drop">Choice 3</div>
</a>
</li>
</div>
</ul>
</li>
<li class="drpbtn">Menu 3
<ul id="menu3">
<div class="dropdown-content">
<li class="li-drop">
<a href="url" onclick="return go(this);">
<div class="div-drop">Choice 1</div>
</a>
</li>
<li class="li-drop">
<a href="url" onclick="return go(this);">
<div class="div-drop">Choice 2</div>
</a>
</li>
<li class="li-drop">
<a href="url" onclick="return go(this);">
<div class="div-drop">Choice 3</div>
</a>
</li>
</div>
</ul>
</li>
</ul>
</div> Можете ли вы помочь мне исправить это?
Комментарии:
1. Я вижу, вы относительно новичок в Stack Overflow и, возможно, не знаете, как все работает, но если вы чувствуете, что кто-то ответил на ваш вопрос, пожалуйста, присудите этот ответ как правильный, щелкнув галочку рядом с ним.
Ответ №1:
function go(obj) {
var page = obj.href;
document.getElementById('otherDiv').innerHTML = '<img src="' page '"></img>'
document.getElementById('menu1').style.display = "none";
document.getElementById('menu2').style.display = "none";
document.getElementById('menu3').style.display = "none";
document.getElementById('menu4').style.display = "none";
document.getElementById('menu5').style.display = "none";
document.getElementById('menu6').style.display = "none";
return false;
}
Я считаю, что ваше возвращение находится не в том месте. Если вы вернетесь в середине функции, ничего после не будет выполнено. Ваш код должен быть таким, как у меня выше.
Комментарии:
1. Я больше ничего не могу сделать без дополнительного кода…. Как происходит сброс отображения, если для параметра display установлено значение none?
2. Отображение в порядке, просто выпадающий список больше не будет отображаться после первого щелчка. Я добавил некоторые из CSS, которые я использовал.
3. Это то, о чем я спрашиваю. Вы устанавливаете для его отображения значение none в своем коде при щелчке. Вам нужно будет установить его обратно, чтобы он снова отображался где-нибудь.
4. О, понял! Спасибо, это поможет мне разобраться.
Ответ №2:
хорошо… если вы используете jquery, вот пример того, как скрыть меню навигации после одного щелчка за пределами меню. Просто добавьте a class="menu" в свой <div> with id="menu" , попробуйте пример и создайте свою собственную логику на основе имен родительских классов …
<script>
$(document).click(function (e) {
var $e = $(e.target);
if (!$e.parents().hasClass('menu')) {
$('.menu').css({ 'display': 'none' });
}
});
</script>