Блог

Главная - Вопросы по программированию - Выберите div, используя другой класс

Выберите div, используя другой класс

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть HTML-код, внутри которого есть два родительских элемента div с классами «main» и «chat». В первом родительском элементе есть другой div с class=»menu»

Когда пользователь нажимает на меню, он добавит класс «open» в 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;}

Спасибо.

Комментарии:

1. .chat не находится внутри .menu . Или вы пропускаете начало <div> после <div class="menu">

2. да, chat его нет в menu , и это моя проблема. Я хочу выбрать класс, которого нет внутри div

Ответ №1:

 $(".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:

Попробуйте этот пример кода:

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>

Ответ №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>

Ответ №4:

Вы можете достичь этого, если также добавите класс в main (или только main , а не menu нет). Предположим, вы решили добавить класс menu-opened в main . Теперь вы должны быть в состоянии достичь желаемых результатов, используя код css:

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

~ Используется для выбора каждого .chat элемента, выполняемого по .main.menu-opened элементу.

Ответ №5:

Вот решение:

Ванильный 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
}

Надеюсь, это поможет. 🙂

Ответ №6:

Вот рабочий код, какой вы хотите .. Но я добавил класс «открыть» в main, несмотря на меню.

 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>