Форум

makalet · #1 (**permalink**) 05.09.2015, 15:26

1. Как сделать, чтобы при клике на дочерний ul список скрывался также, как и при клике вне списка? Например, нажимаем на факториал в "Мат. выч", а список заново открывается. Хочется, чтобы при клике на факториал список не открывался, а открывался заново при нажатии на "Мат. выч".
2. Как можно оптимизировать еще код, а то получается немного быдловато?
http://jsfiddle.net/foxt4bu4/
3. Не обязательный пункт, но хочется узнать для себя. Как можно реализовать данный пример на чистом JS, без использования jquery.

рони · #2 (**permalink**) 05.09.2015, 17:06

makalet,

Сообщение от рони

поиск по форуму: открывашка
выберите из более 200 вариантов более вам подходящий

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  a { text-decoration: none; font-weight: bold; }
  #main {
      width: 602px;
      height: 300px;
      border: 1px solid #E0EBEB ;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -150px 0 0 -301px;
      background: #60a839;}
  #menu {
      padding: 0;
      margin: 0;
      font-family: Georgia;
  }
  #menu li {
    float: left;
    padding: 0;
    width: 200px;
    position: relative;
    transition:background 0.2s ease;
    border: 1px solid #333;
    border-left: none;
    border-right: none;
  }
  #menu li:hover{
    background: #B9D0D0
  }
  #menu li ul {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
      display: none;
      position: absolute;
      left: 0;
      top: 31px;
      background: #E0EBEB;
    }

  #menu li ul li:hover{
   background: #B9D0D0;
   cursor: pointer;
  }

    #menu li ul li {
    height: 26px;
    margin: 0;
    text-align: left;
    border: 0;
  }

  #nav {
      position: relative;
      width: 100%;
      float: left;
      background: #E0EBEB;
  }

  #nav li {
      list-style: none;
      text-align: center;
  }
  #nav li a {
      display: block;
      padding: 0;
      border-left: none;
      border-right: none;
      line-height: 30px;
      font-size: 19px;
      font-family: Trebuchet MS;
      color: #000;
  }
  .active-menu-item {
    background: #B9D0D0;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
    $(function() {
    var $blocks = $("#menu ul");
    $blocks.each(function(i, elem) {
        var $el = $(elem),
            $but = $el.prev();
        $but.click(function() {
            $but.toggleClass("active-menu-item");
            $blocks.filter(function(j, el) {
                i == j && $(el).slideToggle();
                return i != j
            }).slideUp().prev().removeClass("active-menu-item");
        })
    });
    $('html').click(function (event) {
          if ($(event.target).closest('#nav' ).length) return;
          $('.active-menu-item').click()
      });
});

  </script>
</head>

<body>
<div id="main">
    <div id="nav">
      <ul id="menu">
        <li class="mat">
          <a href="#"><span>Мат. вычисления</span></a>
          <ul class="mat">
            <li id="mat-1">Степень</li>
            <li id="mat-2">Факториал</li>
          </ul>
        </li>
        <li class="pl">
          <a href="#"><span>Площадь</span></a>
          <ul>
            <li id="pl-1">Треугольник</li>
            <li id="pl-2">Квадрат</li>
            <li id="pl-3">Прямоугольник</li>
            <li id="pl-4">Эллипс</li>
            <li id="pl-5">Ромб</li>
          </ul>
        </li>
        <li class="ob">
          <a href="#"><span>Объем</span></a>
          <ul>
            <li id="ob-1">Куб</li>
            <li id="ob-2">Конус</li>
            <li id="ob-3">Пирамида</li>
            <li id="ob-4">Параллелепипед</li>
            <li id="ob-5">Цилиндр</li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
</body>

</html>

рони · #3 (**permalink**) 05.09.2015, 17:08

Сообщение от makalet

Как можно реализовать данный пример на чистом JS, без использования jquery.

Аккордеон меню. Затык в сворачивании

makalet · #4 (**permalink**) 05.09.2015, 19:03

рони, уух, выше код, конечно, для меня сложноват(
Но вся та же проблема у вас. Я нажимаю на "Факториал" - список не сворачивается, хотя должен. Так должно работать не только при нажатии на "факториал", а на "Степень, круг и т.д"

рони · #5 (**permalink**) 05.09.2015, 21:27

Сообщение от makalet

Я нажимаю на "Факториал" - список не сворачивается, хотя должен

... так?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  a { text-decoration: none; font-weight: bold; }
  #main {
      width: 602px;
      height: 300px;
      border: 1px solid #E0EBEB ;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -150px 0 0 -301px;
      background: #60a839;}
  #menu {
      padding: 0;
      margin: 0;
      font-family: Georgia;
  }
  #menu li {
    float: left;
    padding: 0;
    width: 200px;
    position: relative;
    transition:background 0.2s ease;
    border: 1px solid #333;
    border-left: none;
    border-right: none;
  }
  #menu li:hover{
    background: #B9D0D0
  }
  #menu li ul {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
      display: none;
      position: absolute;
      left: 0;
      top: 31px;
      background: #E0EBEB;
    }

  #menu li ul li:hover{
   background: #B9D0D0;
   cursor: pointer;
  }

    #menu li ul li {
    height: 26px;
    margin: 0;
    text-align: left;
    border: 0;
  }

  #nav {
      position: relative;
      width: 100%;
      float: left;
      background: #E0EBEB;
  }

  #nav li {
      list-style: none;
      text-align: center;
  }
  #nav li a {
      display: block;
      padding: 0;
      border-left: none;
      border-right: none;
      line-height: 30px;
      font-size: 19px;
      font-family: Trebuchet MS;
      color: #000;
  }
  .active-menu-item {
    background: #B9D0D0;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function() {
    var $blocks = $("#menu li");
    $blocks.each(function(i, elem) {
        var $el = $(elem),
            $ul = $("ul", $el);
        $el.click(function(event) {
            $blocks.each(function(j, el) {
                $(event.target).closest($ul).length || i != j ? $("ul", el).slideUp().prev().removeClass("active-menu-item") : $("ul", el).slideToggle().prev().toggleClass("active-menu-item")
            })
        })
    });
    $("html").click(function(event) {
        if ($(event.target).closest("#nav").length) return;
        $("ul", $blocks).slideUp().prev().removeClass("active-menu-item")
    })
});

  </script>
</head>

<body>
<div id="main">
    <div id="nav">
      <ul id="menu">
        <li class="mat">
          <a href="#"><span>Мат. вычисления</span></a>
          <ul class="mat">
            <li id="mat-1">Степень</li>
            <li id="mat-2">Факториал</li>
          </ul>
        </li>
        <li class="pl">
          <a href="#"><span>Площадь</span></a>
          <ul>
            <li id="pl-1">Треугольник</li>
            <li id="pl-2">Квадрат</li>
            <li id="pl-3">Прямоугольник</li>
            <li id="pl-4">Эллипс</li>
            <li id="pl-5">Ромб</li>
          </ul>
        </li>
        <li class="ob">
          <a href="#"><span>Объем</span></a>
          <ul>
            <li id="ob-1">Куб</li>
            <li id="ob-2">Конус</li>
            <li id="ob-3">Пирамида</li>
            <li id="ob-4">Параллелепипед</li>
            <li id="ob-5">Цилиндр</li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
</body>

</html>

makalet · #6 (**permalink**) 05.09.2015, 21:51

рони, да. А мой вариант настолько убог, что нельзя его подправить, сделав функционал как у вас в последнем варианте со списком и предыдущем, когда мы нажимали на "Площадь, Мат. Выч", то появлялось выделение, т.е. активным он был.

рони · #7 (**permalink**) 05.09.2015, 22:13

makalet,
смотрите 5 пост снова

makalet · #8 (**permalink**) 05.09.2015, 23:58

рони, спасибо. Так что скажете на счет моего варианта? Очень и очень плохо?

рони · #9 (**permalink**) 06.09.2015, 00:24

makalet,
вместо трёх классов для li может 1 использовать ? блоки же функционально одинаковы

Форум

Справочник

Discord чат

Курсы javascript