Question

我有一个html代码，其中有两个div父级，分别为“ main”和“ chat”类。第一父级中还有另一个div，其类别为“ 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;}

谢谢。

Answer 1

nohup python3 script.py > out.log

$(".menu").on("click", function() {
  $(".menu").addClass("open");
  $(".chat").hide();
});

.open {
  background: pink
}

Answer 2

尝试此代码示例：

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>

Answer 3

您可以在点击事件中使用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>

Answer 4

如果也向main添加一个类（或仅添加main，而不添加menu），则可以实现此目的。假设您决定将类menu-opened添加到main。现在，您应该可以使用CSS代码获得所需的结果：

.main.menu-opened~.chat {display:none;}

~用于选择每个.chat元素之后的.main.menu-opened元素。

Answer 5

这是解决方案：

香草JS：（https://codepen.io/cssjs/pen/EMMPjV）

result.forEach(item => console.log(item.title))

jQuery：（https://codepen.io/cssjs/pen/eXXZEG）

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')
  }
}

HTML：

var btnMenu = $('.menu')
var boxChat = $('.chat')

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

CSS：

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

希望有帮助。：）

Answer 6

这是您想要的工作代码。.但是我在菜单的主菜单中添加了“ open”类。

ImageReader

jQuery(document).ready(function($) {
			$('.menu').on('click', function(){
				$('.main').toggleClass('open');
			})
		});

.main.open + .chat{
			display: none;
		}

使用其他班级选择一个div

6 个答案: