$(document).ready(function() {
$(".sub-a").click(function() {
$(this).find("~ .submenu").stop().slideToggle("slow");
});
});
.bg-nav {
width: 90%;
float: right;
padding-top: 15px;
padding-right: 30px;
}
.nav {
margin: 0;
text-align: justify;
font-size: 0.1px;
}
.nav:after {
content: '';
display: inline-block;
width: 100%;
}
.nav .nav__item {
display: inline-block;
font-size: 16px;
position: relative;
}
</body> </html> .nav .nav__item.sub-a {
display: block;
}
.nav .nav__item .submenu {
position: absolute;
top: 100%;
left: 0;
background: #18CFAB;
z-index: 9999;
display: none;
padding: 20px 15px 10px 5px !important;
right: 0;
left: auto;
}
.nav .nav__item li {
display: block;
margin-right: 0;
}
.nav .nav__item li:active {
display: block;
}
.nav .nav__item li a {
color: #000;
display: block;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prechu-alex</title>
<link rel="icon" href="images/icon.ico">
<link rel="stylesheet" href="css/all.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<main>
<div class="bg-nav">
<ul class="nav">
<li class="nav__item"><a href="#" class="sub-a">Home</a>
<ul class="submenu">
<li><a href="#">Подменю 1</a>
</li>
<li><a href="#">Подменю 2</a>
</li>
<li><a href="#">Подменю 3</a>
</li>
</ul>
</li>
<li class="nav__item"><a href="#" class="sub-a">Products</a>
<ul class="submenu">
<li><a href="#">Подменю 4</a>
</li>
<li><a href="#">Подменю 5</a>
</li>
<li><a href="#">Подменю 6</a>
</li>
</ul>
</li>
<li class="nav__item"><a href="#" class="sub-a">Services</a>
<ul class="submenu">
<li><a href="#">Подменю 7</a>
</li>
<li><a href="#">Подменю 8</a>
</li>
<li><a href="#">Подменю 9</a>
</li>
</ul>
</li>
<li class="nav__item"><a href="#" class="sub-a">Contact</a>
<ul class="submenu">
<li><a href="#">Подменю 10</a>
</li>
<li><a href="#">Подменю 11</a>
</li>
<li><a href="#">Подменю 12</a>
</li>
</ul>
</li>
</ul>
</div>
<!--end bg-nav-->
</body>
</html>
Здравствуйте помогите пожалуйста решить эту задачу.Происходит только одно действие нажимаешь на меню допустим HOME да подменю выезжает нажимаешь на Products тоже но предыдущее не закрывается надо только на него кликать,что бы закрылось.Нужно что бы предыдущее закрывалось когда на другой селектор кликаешь и также закрывалось когда кликаешь по любой части страницы кроме селектора тоже.Я начинающий и я еще не владею не jQuery не javascript.А это классический вариант выпадающего меню очень нужен, только по клику. Знающие сказали что там дописать пару строк кода нужно что бы это реализовать, но сам то я его не напишу.Вижу люди мне уже ставят минус за вопрос вы уж извините я просто еще не совсем разобрался с ресурсом.Надеюсь сейчас правильно оформил вопрос.
one()
.