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

Ваш ответ

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

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