使用其他班级选择一个div
[英]Select a div using another class
问题描述
I have a html code which has two div parents inside it with class "main" and "chat". 
我有一个html代码，其中有两个div父级，分别是“ main”和“ chat”类。 There is another div in first parent with class="menu" 第一父级中还有另一个带有class =“ menu”的div
When user clicks on menu, it will add "open" class to the div. 当用户单击菜单时，它将在div中添加“ open”类。 Now i want to hide "chat" when menu is open. 现在我想在菜单打开时隐藏“聊天”。
And i know this if i want to select a class, it must be inside of that div. 我知道如果我想选择一个类，它必须在该div内。 Is there any solution (with css or js) to select another div which is outside of that class? 是否有解决方案（使用CSS或JS）来选择该类之外的另一个div？
And i don't have access to html code of "chat" section because it's loading from a third-party website. 而且我无法访问“聊天”部分的html代码，因为它是从第三方网站加载的。
Here is my HTML code: 这是我的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>
and this is what i want to do (but i know that doesn't work in this way): 这就是我想要做的（但我知道这种方式不起作用）：
.menu.open .chat {display:none;}
Thanks. 谢谢。
6 个解决方案
解决方案1
2 2019-03-25 05:47:10
$(".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>
解决方案2
0 2019-03-25 05:51:57
Try this code sample: 尝试以下代码示例：
JS: JS：
function Open(){
document.getElementsByClassName("menu")[0].classList.add("open");
document.getElementsByClassName("chat")[0].style.display = "none";
}
HTML: 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>
解决方案3
0 2019-03-25 05:57:34
You can use toggle() and toggleClass() in click event 您可以在点击事件中使用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>
解决方案4
0 2019-03-25 06:03:11
You can achieve this if you add a class to main as well (or only main , and not menu ). 如果同时向main （或仅向main ，而不向menu ）添加一个类，则可以实现此目的。 Suppose you decide to add class menu-opened to main . 假设您决定将menu-opened类添加到main 。 Now you should be able to achieve desired results using the css code: 现在，您应该能够使用CSS代码获得所需的结果：
.main.menu-opened~.chat {display:none;}
The ~ is used to select every .chat element proceeded by .main.menu-opened element. ~用于选择以.main.menu-opened元素.main.menu-opened每个.chat元素。
解决方案5
0 2019-03-25 06:55:49
Here is the solution: 解决方法如下：
Vanilla JS: ( https://codepen.io/cssjs/pen/EMMPjV ) 香草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 ) jQuery的 （（ https://codepen.io/cssjs/pen/eXXZEG ）
var btnMenu = $('.menu')
var boxChat = $('.chat')
$(btnMenu).on('click', function() {
$(btnMenu).toggleClass('open')
$(boxChat).toggleClass('open')
})
HTML: 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: CSS：
.chat {
display: none
}
.menu.open {
color: red;
font-weight: bold;
}
.chat.open {
display: block
}
Hope it helps. 希望能帮助到你。 :) :)
解决方案6
0 2019-03-25 08:29:40
Here is the Working code as you want..But I have added "open" class on main in-spite of menu. 这是您想要的工作代码。.但是我在菜单的主菜单中添加了“ open”类。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.