0

$(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.А это классический вариант выпадающего меню очень нужен, только по клику. Знающие сказали что там дописать пару строк кода нужно что бы это реализовать, но сам то я его не напишу.Вижу люди мне уже ставят минус за вопрос вы уж извините я просто еще не совсем разобрался с ресурсом.Надеюсь сейчас правильно оформил вопрос.

2
  • Вы уж все-таки постарайтесь Ваш вопрос оформить. В редакторе есть справка по оформлению кода и возможность предпросмотра сообщения. А насчёт вопроса, то мне кажется, что Вам нужно обработчик на документ добавить, который бы выполнялся один раз и скрывал Ваше меню. В jQuery для этого существует one().
    – XelaNimed
    5 сен 2016 в 23:42
  • 2
    Возможный дубликат вопроса: Показывать один элемент и скрывать остальные
    – sercxjo
    6 сен 2016 в 16:34

1 ответ 1

1

$(document).ready(function() {
  $(".sub-a").click(function() {
    $(".submenu").slideUp("slow")
    $(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;
}
.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.