Javascript 使用另一个类选择一个div_Javascript_Html_Css

Javascript 使用另一个类选择一个div

javascript html css

Javascript 使用另一个类选择一个div,javascript,html,css,Javascript,Html,Css,我有一个html代码，里面有两个div父类，分别是“main”和“chat”。第一个父级中还有另一个div，class=“menu” 当用户点击菜单时，它会在div中添加“open”类。现在我想在菜单打开时隐藏“chat” 我知道如果我想选择一个类，它必须在那个div的内部。有什么解决方案（使用css或js）来选择那个类之外的另一个div吗我无法访问“聊天”部分的html代码，因为它是从第三方网站加载的以下是我的HTML代码： <body> <div class="mai

我有一个html代码，里面有两个div父类，分别是“main”和“chat”。第一个父级中还有另一个div，class=“menu”

当用户点击菜单时，它会在div中添加“open”类。现在我想在菜单打开时隐藏“chat”

我知道如果我想选择一个类，它必须在那个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”）。在（“单击”，函数（）{
$（“.menu”）.addClass（“打开”）；
$（“.chat”）.hide（）；
});
。打开{
背景：粉红色
}

单击它会将“打开”添加到“菜单”类中
聊天室

$（.menu”）。在（“单击”，函数（）{
$（“.menu”）.addClass（“打开”）；
$（“.chat”）.hide（）；
});
。打开{
背景：粉红色
}

单击它会将“打开”添加到“菜单”类中
聊天室
尝试以下代码示例：
JS:
HTML:

单击它会将“打开”添加到“菜单”类中
尝试以下代码示例：
JS:
HTML:

单击它会将“打开”添加到“菜单”类中
您可以在单击事件中使用切换（）
和切换类（）


$（.menu”）。在（“单击”，函数（）{
$（“.menu”）.toggleClass（“打开”）；
$（“.chat”）.toggle（）
});
。打开{
颜色：蓝色；
}

单击它会将“打开”添加到“菜单”类中
聊天室
您可以在单击事件中使用切换（）
和切换类（）


$（.menu”）。在（“单击”，函数（）{
$（“.menu”）.toggleClass（“打开”）；
$（“.chat”）.toggle（）
});
。打开{
颜色：蓝色；
}

单击它会将“打开”添加到“菜单”类中
聊天室
如果您也向main
添加一个类（或者仅main
，而不是菜单
），则可以实现这一点。假设您决定将类菜单打开
添加到main
。现在，您应该能够使用css代码实现所需的结果：
.main.menu已打开~.chat{display:none；}

~
用于选择由.main.menu打开的元素进行的每个.chat
元素。
如果您也向main
添加一个类（或者只向main
添加一个类，而不是菜单
），则可以实现这一点。假设您决定将类菜单打开
添加到main
。现在，您应该能够使用css代码实现所需的结果：
.main.menu已打开~.chat{display:none；}

~
用于选择由执行的每个.chat
元素。主菜单打开了元素。
以下是解决方案：
香草JS:（）
jQuery:（）
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>

.chat {
  display: none
}
.menu.open {
  color: red;
  font-weight: bold;
}
.chat.open {
  display: block
}

希望有帮助。：）
 以下是解决方案：
香草JS:（）
jQuery:（）
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>

.chat {
  display: none
}
.menu.open {
  color: red;
  font-weight: bold;
}
.chat.open {
  display: block
}

希望有帮助。：）
 这是您想要的工作代码..但是我在main上添加了“open”类，尽管有菜单

jQuery（文档）.ready（函数（$）{
$（'.menu'）。在（'click'，function（）上{
$（'.main'）.toggleClass（'open'）；
})
});
.main.open+.chat{
显示：无；
}

单击它会将“打开”添加到“菜单”类中
聊天数据
这是您想要的工作代码。但是我在main上添加了“open”类，不管菜单如何

jQuery（文档）.ready（函数（$）{
$（'.menu'）。在（'click'，function（）上{
$（'.main'）.toggleClass（'open'）；
})
});
.main.open+.chat{
显示：无；
}

单击它会将“打开”添加到“菜单”类中
聊天数据
.chat
不在.menu
内。或者在
是聊天
不在菜单
中之后，您缺少一个开始的
，这是我的问题。我想选择一个不在div中的类。chat
不在菜单中。或者在
是聊天
不在菜单
中之后，您缺少一个开始的，这是我的问题。我想选择一个不在div中的类
var btnMenu = $('.menu')
var boxChat = $('.chat')

$(btnMenu).on('click', function() {
    $(btnMenu).toggleClass('open')
    $(boxChat).toggleClass('open')
})

<body>
    <div class='main'>
        <a href="#menu" title="Menu" class='menu'>Menu</a>
    </div>
    <div class='chat'>
      <div>Some chat content.</div>
    </div>
</body>

.chat {
  display: none
}
.menu.open {
  color: red;
  font-weight: bold;
}
.chat.open {
  display: block
}