Форум

rafaello · #1 (**permalink**) 16.04.2018, 19:36

Ребята, в предыдущем тикете здорово помогли. Однако есть еще вопрос.

<style type="text/css">

	  .nav__dropdown_second{

	      display:none;

	  }
	  </style>
<div class="nav__dropdown">
                                    <div class="nav__dropdown-item">
                                        <a href="#" class="nav__dropdown-link">Территория обслуживания сетевой организации </a>
                                    </div>
                                    <div class="nav__dropdown-item">
                                        <a href="#" class="nav__dropdown-link">Передача электрической энергии</a>
                                    </div>
                                    <div class="nav__dropdown-item">
                                        <a href="#" class="nav__dropdown-link ">РАСКРЫТИЕ ИНФОРМАЦИИ</a>
                                        <div class="nav__dropdown nav__dropdown_second">
                                            <div class="nav__dropdown-item">
                                                <a href="#" class="nav__dropdown-link">Общая информация о передаче электрической энергии</a>
                                            </div>
                                            <div class="nav__dropdown-item">
                                                <a href="#" class="nav__dropdown-link">Нормативные документы</a>
                                            </div>
                                        </div>
                                    </div>
									<div class="nav__dropdown-item">
                                        <a href="#" class="nav__dropdown-link ">Другая информация</a>
                                        <div class="nav__dropdown nav__dropdown_second">
                                            <div class="nav__dropdown-item">
                                                <a href="#" class="nav__dropdown-link">Документация</a>
                                            </div>
                                            <div class="nav__dropdown-item">
                                                <a href="#" class="nav__dropdown-link">Нормативные документы</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

надо, чтобы при наведении на див nav__dropdown-item показывался (display:block ; ) только дочерний див nav__dropdown_second
Пробовал так, но что то не получается

$(function(){
  $(".nav__dropdown-item").hover(function(){
    $(this).children('.nav__dropdown_second').show();
   },
   function(){
    $(this).children('.nav__dropdown_second').hide();
   });});

Надо только дочерний сделать видимым!!!

j0hnik · #2 (**permalink**) 16.04.2018, 19:43

все работает вроде.

j0hnik · #3 (**permalink**) 16.04.2018, 19:58

.nav__dropdown-item:hover .nav__dropdown_second{
display: block;
}

css это тоже под силу

rafaello · #4 (**permalink**) 16.04.2018, 20:08

так дивов "nav__dropdown-item" много же!!!!! А мне надо сделать видимым див "nav__dropdown_second" только внутри именно наведенного дива "nav__dropdown-item". А если делать через CSS то откроются все дивы "nav__dropdown_second"

j0hnik · #5 (**permalink**) 16.04.2018, 20:14

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<style type="text/css">

	.nav__dropdown_second{

		display:none;

	}

	.nav__dropdown-item:hover .nav__dropdown_second{
		display: block;
	}
</style>
<div class="nav__dropdown">
	<div class="nav__dropdown-item">
		<a href="#" class="nav__dropdown-link">Территория обслуживания сетевой организации </a>
	</div>
	<div class="nav__dropdown-item">
		<a href="#" class="nav__dropdown-link">Передача электрической энергии</a>
	</div>
	<div class="nav__dropdown-item">
		<a href="#" class="nav__dropdown-link ">РАСКРЫТИЕ ИНФОРМАЦИИ</a>
		<div class="nav__dropdown nav__dropdown_second">
			<div class="nav__dropdown-item">
				<a href="#" class="nav__dropdown-link">1-ой блок</a>
			</div>
			<div class="nav__dropdown-item">
				<a href="#" class="nav__dropdown-link">1-ой блок</a>
			</div>
		</div>
	</div>
	<div class="nav__dropdown-item">
		<a href="#" class="nav__dropdown-link ">Другая информация</a>
		<div class="nav__dropdown nav__dropdown_second">
			<div class="nav__dropdown-item">
				<a href="#" class="nav__dropdown-link">2-ой блок</a>
			</div>
			<div class="nav__dropdown-item">
				<a href="#" class="nav__dropdown-link">2-ой блок</a>
			</div>
		</div>
	</div>
</div>
</body>
</html>

rafaello · #6 (**permalink**) 17.04.2018, 09:10

спасибо!!!!!!!

Форум

Справочник

Discord чат

Курсы javascript