Проверьте, отображается ли элемент на экране
у меня возникла новая проблема с меню, которое я делаю. Я пытаюсь скрыть его, когда пользователь нажимает кнопку вне самого меню. Я не могу проверить отображаемое значение элемента, так как оно всегда отображается, но переводится справа от элемента, поэтому не находится в видимой DOM.
Проблема в том, что кнопка сама по себе не работает и что меню активируется при нажатии на экран, поэтому моя попытка проверить, виден ли div или нет, я также пытался использовать функцию с getBoundingClientRect();, что предлагают многие, но я остался с document.body.contains(MyElement).
Это мой JavaScript:
function myFunction(x) {
x.classList.toggle("change");
document.getElementById("dropdown-meniu-content").classList.toggle("show");}
$(document).click(function(event) {
if ( document.body.contains(document.getElementById('dropdown-meniu-content') ) ) {
if (!$(event.target).closest('#dropdown-meniu-content').length) {
document.getElementById("dropdown-meniu-content").classList.toggle("show");
document.getElementById("buton-meniu").classList.toggle("change");
}
}
}); CSS:
.logo {
float: left;
margin-top: 10px;
margin-left: 5px;
width: 200px;
height: 100px;
}
.meniu {
float: right;
width: auto;
}
.buton-meniu {
display: block;
cursor: pointer;
width: 35px;
margin-right: 30px;
margin-top: 40px;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.dropdown-meniu {
position: relative;
display: inline-block;
}
.dropdown-meniu-content {
top: 110px;
position: fixed;
background-color: #d6d6d6;
width: 30%;
max-width: 10000px;
height: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
overflow: hidden;
right: 0;
transform: translateX(100%);
transition: transform 0.5s ease;
}
.show {
transform: translateX(0%);
}
И HTML:
<div class = "meniu">
<div class = "dropdown-meniu">
<div id = "buton-meniu" class = "buton-meniu" onclick = "myFunction(this)">
<div class = "bar1"></div>
<div class = "bar2"></div>
<div class = "bar3"></div>
</div>
<div id = "dropdown-meniu-content" class = "dropdown-meniu-content">
<div class = "dropdown-ferestre">
<div id = "buton-ferestre" class = "buton-ferestre">Ferestre</div>
<div id = "dropdown-ferestre-content" class = "dropdown-ferestre-content">
<p id = "demo"></p>
</div>
</div>
</div>
</div>
</div>
Если вы не хотите просматривать код, JSFiddle находится здесь: https://jsfiddle.net/1qrtb424/18/
Спасибо за помощь!
ну, я бы хотел скрыть это с помощью кнопки и щелкнув за пределами самого меню
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проверить, виден ли элемент на экране, - сложная проблема, но я не думаю, что вам нужно решать ее для выполнения своей задачи. Может быть какая-то причина, по которой вам нужно сделать это таким образом, но, если нет, вместо проверки того, отображается ли элемент на экране, вы можете просто проверить наличие класса, который делает этот элемент видимым.
Я хотел меньше переделывать ваш javascript, но мне потребовалось немного времени, чтобы запомнить решение проблемы распространения (нажатие кнопки также по умолчанию считается щелчком по документу, если вы не добавляете event.stopPropagation), и это было проще для меня переписать. Однако те же принципы могут быть применены в вашем решении.
Между прочим, это очень хороший переход от бургера к кнопке x.
var button = document.querySelector('#buton-meniu');
var content = document.querySelector('#dropdown-meniu-content');
button.addEventListener('click', function(e) {
e.stopPropagation();
e.currentTarget.classList.toggle('change');
content.classList.toggle('show');
}, true)
document.addEventListener('click', function() {
if (content.classList.contains('show')) {
content.classList.remove('show');
button.classList.remove('change');
}
})
content.addEventListener('click', function(e) {
e.stopPropagation();
}).logo {
float: left;
margin-top: 10px;
margin-left: 5px;
width: 200px;
height: 100px;
}
.meniu {
float: right;
width: auto;
}
.buton-meniu {
display: block;
cursor: pointer;
width: 35px;
margin-right: 30px;
margin-top: 40px;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.dropdown-meniu {
position: relative;
display: inline-block;
}
.dropdown-meniu-content {
top: 110px;
position: fixed;
background-color: #d6d6d6;
width: 30%;
max-width: 10000px;
height: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
overflow: hidden;
right: 0;
transform: translateX(100%);
transition: transform 0.5s ease;
}
.show {
transform: translateX(0%);
}<div class = "meniu">
<div class = "dropdown-meniu">
<div id = "buton-meniu" class = "buton-meniu" >
<div class = "bar1"></div>
<div class = "bar2"></div>
<div class = "bar3"></div>
</div>
<div id = "dropdown-meniu-content" class = "dropdown-meniu-content">
<div class = "dropdown-ferestre">
<div id = "buton-ferestre" class = "buton-ferestre">Ferestre</div>
<div id = "dropdown-ferestre-content" class = "dropdown-ferestre-content">
<p id = "demo"></p>
</div>
</div>
</div>
</div>
</div>ваше решение работает так, как задумано, и у меня нет никаких скрытых мотивов проверять, отображается ли мое меню. Я подумал, что это будет лучший способ обойти проблему. не могли бы вы указать мне ссылку или руководство по событиям распространения? Я новичок в javascript и очень хочу его изучить (я уже немного знаю C++ и PHP). еще раз спасибо!
Я бы хотел, чтобы у меня было направление, куда бы я тебя послал. MDN всегда является моим первым справочником, хотя обычно больше для документов, чем для руководств, но у них есть один: developer.mozilla.org/en-US/docs/Learn/JavaScript/…. FreeCodeCamp обычно довольно хорош, и у них также есть объяснение: medium.freecodecamp.org/…
будет ли W3Schools достаточно хороша? Я изучил у них CSS, HTML и некоторые из PHP, и это кажется хорошим сайтом, но люди говорят, что он устарел и тому подобное.
Когда я только учился, кто-то указал мне на MDN, а не на W3Schools, так что мне удобнее с ним, но, поскольку я почти всегда сначала хожу в MDN, я мало использовал W3Schools и не могу сказать, есть ли существенная разница. Я действительно думаю, что сайт MDN выглядит лучше, что должно иметь значение, поскольку предметом обсуждения является разработка внешнего интерфейса.
большое спасибо за ответ. Я буду использовать оба источника для изучения и, конечно же, переполнение стека, когда я где-то застряну.
Итак, вы хотите, чтобы меню отображалось только при нажатии на
button-meniu, а меню при щелчке мышью в любом месте документа скрывать?