Выберите div, используя другой класс
У меня есть html-код, в котором есть два родителя div с классами «основной» и «чат». В первом родительском элементе есть еще один div с class="menu"
Когда пользователь нажимает на меню, он добавит «открытый» класс в div. Теперь я хочу скрыть «чат», когда меню открыто.
И я знаю это, если я хочу выбрать класс, он должен быть внутри этого div. Есть ли решение (с css или js) для выбора другого div, который находится за пределами этого класса?
И у меня нет доступа к html-коду раздела «чат», потому что он загружается со стороннего веб-сайта.
Вот мой HTML-код:
<body>
<div class = "main">
<div class = "menu">
by click it will add "open" to the "menu" class
</div>
</div>
<div class = "chat">
</div>
</body>
и это то, что я хочу сделать (но я знаю, что это не работает таким образом):
.menu.open .chat {display:none;}
Спасибо.
да chat не в menu и это моя проблема. Я хочу выбрать класс, который не находится внутри div
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
$(".menu").on("click", function() {
$(".menu").addClass("open");
$(".chat").hide();
});.open {
background: pink
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class = "main">
<div class = "menu">
by click it will add "open" to the "menu" class
</div>
</div>
<div class = "chat">
Chat Div
</div>
</body>Попробуйте этот пример кода:
JS:
function Open(){
document.getElementsByClassName("menu")[0].classList.add("open");
document.getElementsByClassName("chat")[0].style.display = "none";
}
HTML:
<body>
<div class = "main">
<div class = "menu" onclick = "Open()">
by click it will add "open" to the "menu" class
</div>
</div>
<div class = "chat"></div>
</body>
Вы можете использовать toggle() и toggleClass() в событии клика
$(".menu").on("click", function() {
$(".menu").toggleClass("open");
$(".chat").toggle()
});.open{
color:blue;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class = "main">
<div class = "menu">
by click it will add "open" to the "menu" class
</div>
</div>
<div class = "chat">
Chat Div
</div>
</body>Вы можете добиться этого, если добавите класс и в main (или только main, а не menu). Предположим, вы решили добавить класс menu-opened к main. Теперь вы сможете добиться желаемых результатов, используя код css:
.main.menu-opened~.chat {display:none;}
~ используется для выбора каждого элемента .chat, предшествующего элементу .main.menu-opened.
Вот решение:
Ванильный JS: (https://codepen.io/cssjs/pen/EMMPjV)
var btnMenu = document.querySelector('.menu')
var boxChat = document.querySelector('.chat')
btnMenu.onclick = handleMenu
function handleMenu(e) {
e.preventDefault()
e.stopPropagation()
if (!btnMenu.classList.contains('open')) {
btnMenu.classList.add('open')
boxChat.classList.add('open')
} else {
btnMenu.classList.remove('open')
boxChat.classList.remove('open')
}
}
jQuery: (https://codepen.io/cssjs/pen/eXXZEG)
var btnMenu = $('.menu')
var boxChat = $('.chat')
$(btnMenu).on('click', function() {
$(btnMenu).toggleClass('open')
$(boxChat).toggleClass('open')
})
HTML:
<body>
<div class='main'>
<a href = "#menu" title = "Menu" class='menu'>Menu</a>
</div>
<div class='chat'>
<div>Some chat content.</div>
</div>
</body>
CSS:
.chat {
display: none
}
.menu.open {
color: red;
font-weight: bold;
}
.chat.open {
display: block
}
Надеюсь, поможет. :)
Вот рабочий код, как вы хотите. Но я добавил «открытый» класс в главное меню, несмотря на это.
jQuery(document).ready(function($) {
$('.menu').on('click', function(){
$('.main').toggleClass('open');
})
});.main.open + .chat{
display: none;
}<div class = "main">
<div class = "menu">
by click it will add "open" to the "menu" class
</div>
</div>
<div class = "chat">
chat data
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
.chatне внутри.menu. Или вы пропустили начало<div>после<div class = "menu">