0

Доброго времени суток! Подскажите как сделать так, чтобы при нажатии на любой элемент из списка, выводился список, который содержится в нем.

$(document).ready(function() {

  var height_sub_menu;

  $(".sub-menu").click(function() {
    height_sub_menu = $(".sub-menu").height();
    console.log(height_sub_menu);
    $(".sub_catalog").css("display", "block");
    $(".sub_catalog").css("height", height_sub_menu);
  });

});
.menu,
.menu li {
  margin: 0;
  padding: 0;
}

.menu {
  position: absolute;
  width: 1350px;
  margin: 0 auto;
  text-align: center;
  background: #03658e;
}

.menu li {
  display: inline-block;
  text-align: center;
}

.menu a {
  display: block;
  padding: 5px 30px;
  color: #fff;
  font-size: 150%;
  text-decoration: none;
}

.menu a:hover {
  background: #8AB8CC;
}

.sub-menu {
  display: block;
  position: absolute;
  width: 200px;
  left: 70px;
  padding: 0;
  margin: 0;
  list-style: none;
  background: #03658e;
}

.sub-menu_1 {
  display: none;
  position: absolute;
  width: 980px;
  left: 200px;
  background: #03658e;
}

.sub_catalog {
  position: absolute;
  display: none;
  width: 1000px;
  left: 275px;
  padding: 0;
  margin: 0;
  list-style: none;
  background: #03658e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title>Тестовое задание</title>
  <link rel="stylesheet" href="mmm.css" type="text/css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script type="text/javascript" src="mmm.js"></script>
</head>



<body>

  <ul class="menu">
    <ul class="sub-menu">
      <li><a href="#">Aaaaa</a>
        <ul class="sub-menu_1">
          <li><a href="#">Aaaaaa</a></li>
          <li><a href="#">Aaaaaa</a></li>
          <li><a href="#">Aaaaaa</a></li>
        </ul>
      </li>
      <li><a href="#">Bbbbb</a></li>
      <li><a href="#">Ccccc</a></li>
      <li><a href="#">Ddddd</a></li>
      <li><a href="#">Iiiii</a></li>
      <li><a href="#">Fffff</a>
        <ul class="sub-menu_1">
          <li><a href="#">Н</a></li>
          <li><a href="#">Х</a></li>
          <li><a href="#">И</a></li>
        </ul>
      </li>
    </ul>

  </ul>
  <div class="sub_catalog"></div>
</body>

</html>

1 ответ 1

2

У вас странное отображение сейчас... Я не трогал, вдруг это фича...

По делу: все, что вам надо - это по клику на каждый li элемент пытаться показывать вложенный .sub-menu_1. Это и делаем с помощью .find(). Далее в CSS добавили класс .shown, который сетает стили элемента, когда он показан (в нашем случае display: block; было достаточно) и просто добавляем/удаляем этот класс с элемента (с помощью .toggleClass()).

$(".sub-menu li").click(function() {
  let subMenu = $(this).find('.sub-menu_1');
  subMenu.toggleClass('shown');
});
.menu,
.menu li {
  margin: 0;
  padding: 0;
}

.menu {
  position: absolute;
  width: 1350px;
  margin: 0 auto;
  text-align: center;
  background: #03658e;
}

.menu li {
  display: inline-block;
  text-align: center;
}

.menu a {
  display: block;
  padding: 5px 30px;
  color: #fff;
  font-size: 150%;
  text-decoration: none;
}

.menu a:hover {
  background: #8AB8CC;
}

.sub-menu {
  display: block;
  position: absolute;
  width: 200px;
  left: 70px;
  padding: 0;
  margin: 0;
  list-style: none;
  background: #03658e;
}

.sub-menu_1 {
  display: none;
  position: absolute;
  width: 980px;
  left: 200px;
  background: #03658e;
}

.sub-menu_1.shown {
  display: block;
}

.sub_catalog {
  position: absolute;
  display: none;
  width: 1000px;
  left: 275px;
  padding: 0;
  margin: 0;
  list-style: none;
  background: #03658e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="menu">
  <ul class="sub-menu">
    <li><a href="#">Aaaaa</a>
      <ul class="sub-menu_1">
        <li><a href="#">Aaaaaa</a></li>
        <li><a href="#">Aaaaaa</a></li>
        <li><a href="#">Aaaaaa</a></li>
      </ul>
    </li>
    <li><a href="#">Bbbbb</a></li>
    <li><a href="#">Ccccc</a></li>
    <li><a href="#">Ddddd</a></li>
    <li><a href="#">Iiiii</a></li>
    <li><a href="#">Fffff</a>
      <ul class="sub-menu_1">
        <li><a href="#">Н</a></li>
        <li><a href="#">Х</a></li>
        <li><a href="#">И</a></li>
      </ul>
    </li>
  </ul>

</ul>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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