5

Дано: Сложное меню с несколькими субменюшками открывающимися как slide справа. Все срабатывает, только вот идет проблема с toggle, т.е. меню открывается, а при повторном клике не закрывается.

Механизм меню:

1.Для открытия второй субменюшки нужно кликнуть по элементам меню с самого меню.

2.Третья субменюшка открывается при hover-е на элементы меню со второй субменюшки.

Собственно все это получается, однако у меня не получаетсяя реализовать эффект toggle на первом этапе, т.е. при повторном нажатии на элемент в меню, оно должно закрываться.

Проблема только в toggle эффекте, с остальным справился.

Пробовал изменить addClass и RemoveClass на toggleClass, но бестолку. Работает, но как-то немного глючить и при нажатии на элементы меню со второй субменюшки все закрывается. По идее такого быть не должно.

Пробовал повесить счетчик кликов на элемент. Однако сработало не как я ожидал.

Помогите пожалуйста именно с этим кодом. Bootstrapовский дропдаун не адаптировался к этому, а я получил кусочек кода из которого слепил эту кашицу на jquery. Менять код скорее всего не стану так как я уже показал заказчику.

P.S. Вопрос все еще сильно актуален.

console.log($('.category>li').length);
$('.category>li').click(function(event) {
  $(this).siblings('li').find('.r_div').removeClass('slideRight').find('.cat_3').removeClass('slideRight');
  $(this).find('.r_div').addClass('slideRight');
});
$('.cat_2>li').hover(function(event) {
  $(this).siblings('li').find('.cat_3').removeClass('slideRight')
  $(this).find('.cat_3').addClass('slideRight');
});
ul {
  list-style: none;
  position: relative;
  padding: 0;
}

ul.category {
  width: 100px;
}

.category li {
  padding: 5px 0;
  background: #eee;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}

.r_div,
.cat_3 {
  position: absolute;
  top: 0;
  width: 0%;
  background: #eee;
  left: 100%;
  border-left: 3px solid #000;
  padding: 0 10px;
  visibility: hidden;
  opacity: 0;
}

.r_div.slideRight,
.cat_3.slideRight {
  visibility: visible;
  width: 100px;
  transition: all .3s linear;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category">
  <li>
    Menu #1
    <div class="r_div">
      <ul class="cat_2">
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
      </ul>

    </div>
  </li>
  <li>
    Menu #2
    <div class="r_div">
      <ul>
        <li>Test2</li>
        <li>Test2</li>
        <li>Test2</li>
        <li>Test2</li>
        <li>Test2</li>
      </ul>

    </div>
  </li>
  <li>
    Menu #3
    <div class="r_div">
      <ul>
        <li>Test3</li>
        <li>Test3</li>
        <li>Test3</li>
        <li>Test3</li>
        <li>Test3</li>
      </ul>

    </div>
  </li>
  <li>
    Menu #4
    <div class="r_div">
      <ul>
        <li>Test4</li>
        <li>Test4</li>
        <li>Test4</li>
        <li>Test4</li>
        <li>Test4</li>
      </ul>

    </div>
  </li>
  <li>
    Menu #5
    <div class="r_div">
      <ul class="cat_2">
        <li>Test5
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test5</li>

        <li>Test5</li>
        <li>Test5</li>
        <li>Test5</li>
      </ul>

    </div>
  </li>
</ul>

Текущий процесс:

http://osiyo-nur.uz/goodgross/

3
  • 2
    Это проще делать стилями а не городить кучу логики. Сделать для каждого сабменю класс active например, и тогглить только его 9 фев 2018 в 6:12
  • Изначально все было на css. Но потом заказчику захотелось чтобы меню открывалось на клике.
    – Bekzod
    9 фев 2018 в 18:24
  • Так и дергайте его класс по клику, нет проблемы 10 фев 2018 в 4:36

4 ответа 4

5

$('.category a').click(function(event) {
  $(this).toggleClass("active");
  $(".category a").not($(this)).not($(this).parents("li>a")).removeClass("active");
  $(".category ul").not($(this).parents("ul")).not($(this).next("ul")).removeClass("active");
  $(this).next("ul").toggleClass("active");
});
.category>li ul {
  position: absolute;
  left: 100%;
  display: none;
  padding: 0px;
  top: 0px;
}

.category>li ul.active {
  display: block;
}

ul.category {
  width: auto;
  display: inline-block;
}

ul.category li,
ul.category a {
  color: #000;
  text-decoration: none;
}

.category,
.category ul {
  background: #a9a9a9;
  color: #000;
}

ul.category li {
  list-style: none;
  padding: 5px 10px;
}

ul.category ul {
  margin: 0px;
  padding: 0px;
  top: 0px;
}

.category {
  position: relative;
}

* {
  box-sizing: border-box;
}

ul.category,
ul.category ul {
  border-right: 1px #fff solid;
}

ul.category {
  margin: 0px;
  padding: 0px;
}

.category a.active {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category">
  <li>
    <a href="#">Menu #1</a>
    <ul>
      <li>
        <a href="#">test</a>
        <ul>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
        </ul>
      </li>
      <li>
        <a href="#">test</a>
        <ul>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
        </ul>
      </li>
      <li>
        <a href="#">test</a>
        <ul>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
        </ul>
      </li>
      <li>
        <a href="#">test</a>
        <ul>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
        </ul>
      </li>
      <li>
        <a href="#">test</a>
        <ul>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu #2</a>
    <ul>

      <li>
        <a href="#">test</a>
        <ul>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
        </ul>
      </li>
      <li>
        <a href="#">test</a>
        <ul>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
        </ul>
      </li>
      <li>
        <a href="#">test</a>
        <ul>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
          <li>submenu</li>
        </ul>
      </li>
      <li>
        <a href="#">test</a>
        <ul>
          <li>
            <a href="#">test</a>
            <ul>
              <li>submenu</li>
              <li>submenu</li>
              <li>submenu</li>
              <li>submenu</li>
              <li>submenu</li>
            </ul>
          </li>
          <li>
            <a href="#">test</a>
            <ul>
              <li>submenu</li>
              <li>submenu</li>
              <li>submenu</li>
              <li>submenu</li>
              <li>submenu</li>
            </ul>
          </li>
          <li>
            <a href="#">test</a>
            <ul>
              <li>submenu</li>
              <li>submenu</li>
              <li>submenu</li>
              <li>submenu</li>
              <li>submenu</li>
            </ul>
          </li>
          <li>
            <a href="#">test</a>
            <ul>
              <li>submenu</li>
              <li>submenu</li>
              <li>submenu</li>
              <li>submenu</li>
              <li>submenu</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>

</ul>

1
  • Лучше делай анимацию стилями. Так будет меньше нагрузки на броузер и больше порядка в коде. 9 фев 2018 в 12:55
2

Скорее всего вы просто не вставили toggle

$('.category>li').click(function(event) {
    $(this).toggle(function() { 
    ваша анимация
    });
});
1
+50

console.log($('.category>li').length);
$('.category > li').click(function(event) {
$(this).find('.r_div').toggle();
$('.r_div').addClass('subtog');
$(this).find('.r_div').removeClass('subtog');
 });

$('.cat_2>li').hover(function(event) {
$(this).find('.cat_3').addClass('slideRight');
  $(this).siblings('li').find('.cat_3').removeClass('slideRight')
});
ul {
  list-style: none;
  position: relative;
  padding: 0;
}

ul.category {
  width: 100px;
}

.category li {
  padding: 5px 0;
  background: #eee;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}

.r_div,
.cat_3 {
  position: absolute;
  top: 0;
  width: 0%;
  background: #eee;
  left: 100%;
  border-left: 3px solid #000;
  padding: 0 10px;
  /*visibility: hidden;*/
 
}

.r_div
{ display:none;
  width: 100px;
  transition: all .3s linear;
 }
.cat_3.slideRight {
  visibility: visible;
  width: 100px;
  transition: all .3s linear;
  opacity: 1;
  display:block;
}
.subtog {
  display:none !important;
  }
  .cat_3
  {visibility: hidden;
  opacity: 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category">
  <li>
    Menu #1
    <div class="r_div">
      <ul class="cat_2">
      <li><a href="#">Test</a>
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
      </ul>

    </div>
  </li>
  <li>
    Menu #2
    <div class="r_div">
      <ul>
        <li>Test2</li>
        <li>Test2</li>
        <li>Test2</li>
        <li>Test2</li>
        <li>Test2</li>
      </ul>

    </div>
  </li>
  <li>
    Menu #3
    <div class="r_div">
      <ul>
        <li>Test3</li>
        <li>Test3</li>
        <li>Test3</li>
        <li>Test3</li>
        <li>Test3</li>
      </ul>

    </div>
  </li>
  <li>
    Menu #4
    <div class="r_div">
      <ul>
        <li>Test4</li>
        <li>Test4</li>
        <li>Test4</li>
        <li>Test4</li>
        <li>Test4</li>
      </ul>

    </div>
  </li>
  <li>
    Menu #5
    <div class="r_div">
      <ul class="cat_2">
        <li>Test5
          <ul class="cat_3">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
          </ul>
        </li>
        <li>Test5</li>

        <li>Test5</li>
        <li>Test5</li>
        <li>Test5</li>
      </ul>

    </div>
  </li>
</ul>

0

А изобретение велосипеда обязательно? Нельзя использовать bootstrap? К примеру вот:

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
</style>
</head>
<body>
   
<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

Multi-Level Dropdowns

Да и к тому же с такой структурой меню Вас часто будет вспоминать тот кто будет реализовывать это на backend.

Если без кликов, а просто с hover, то можно вот так:

#main-menu {
  background-color: #000;
  min-height: 45px;
  margin-bottom: 0;
}
#main-menu .navbar-collapse {
  padding: 0;
}
#main-menu .nav {
  width: 100%;
  position: relative;
}
#main-menu .nav li.active a {
  background-color: #c4c4c4 c;
}
#main-menu .nav li.parent {
  position: relative;
}
#main-menu .nav li.parent > a::after {
  content: "\e900";
  font-family: 'icomoon';
  position: absolute;
  color: #fff;
  font-size: 6px;
  top: 12px;
  right: 13px;
  transform-origin: center;
}
#main-menu .nav li.parent > a:hover::after {
  transform: rotate(180deg);
}
#main-menu .nav li.parent .parent > ul {
  position: absolute;
  left: 100%;
  top: 0;
}
#main-menu .nav li.parent .parent > ul a {
  background-color: #c2c2c2;
}
#main-menu .nav li.parent .parent a::after {
  top: 18px;
}
#main-menu .nav li.parent > ul {
  display: none;
  background-color: #000;
  list-style: none;
  position: absolute;
  padding-left: 0;
  width: 100%;
}
#main-menu .nav li.parent > ul > li {
  max-height: 44px;
  width: 100%;
}
#main-menu .nav li.parent > ul > li > a {
  font-size: 14px;
  text-transform: none;
  padding: 12px 20px;
  width: 100%;
  display: block;
}
#main-menu .nav li.parent > a {
  padding: 12px 35px 12px 15px;
}
#main-menu .nav li.parent > a:hover {
  background-color: #c4c4c4;
}
#main-menu .nav li.parent > a:hover + ul {
  display: block;
}
#main-menu .nav li.parent ul:hover {
  display: block;
}
#main-menu .nav a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 12px 25px;
}
#main-menu .nav a:hover {
  background-color: #c2c2c2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="main-menu" class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="row">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#">Item Menu 1</a></li>
          <li class="parent active">
            <a href="#">Item Menu 2</a>
            <ul>
              <li class="parent">
                <a href="#">Item menu 1</a>
                <ul>
                  <li><a href="#">Item Menu</a></li>
                  <li><a href="#">Item Menu</a></li>
                  <li class="parent">
                    <a href="#">Item menu 1</a>
                    <ul>
                      <li><a href="#">Item Menu</a></li>
                      <li><a href="#">Item Menu</a></li>
                      <li><a href="#">Item Menu</a></li>
                      <li><a href="#">Item Menu</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Item Menu</a></li>
                </ul>
              </li>
              <li><a href="#">Item menu 2</a></li>
              <li class="parent">
                <a href="#">Item menu 3</a>
                <ul>
                  <li><a href="#">Item Menu</a></li>
                  <li><a href="#">Item Menu</a></li>
                  <li><a href="#">Item Menu</a></li>
                  <li><a href="#">Item Menu</a></li>
                </ul>
              </li>
              <li><a href="#">Item menu 4</a></li>
            </ul>
          </li>
          <li><a href="#">Item Menu 3</a></li>
          <li><a href="#">Item Menu 4</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Multi-Level Menu Тут адаптивом проблемы, лучше на смотреть на всю страницу.

2
  • 1
    > А изобретение велосипеда обязательно? Если велосипед деревянный, как тот же Bootstrap 3, то обязательно.
    – Deonis
    16 фев 2018 в 8:49
  • 1
    Плюсую, столько готовых либ есть, зачем тут изобретать! Только bootstrap это мувитон, есть гораздо более удобные инструменты, например легковесный плагин jquery superfish подходящий для любого css-hover-меню. 17 фев 2018 в 15:29

Ваш ответ

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

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