正在显示所有子菜单项

Question

我正在尝试创建类似于sample link 的导航菜单

我从头开始创建了一个基于 jquery 和 css 的导航菜单，它应该显示如上链接所示的下拉菜单。我想实现如上菜单所示的下拉样式。

我创建了 4 个深度级别的菜单，当我打开所有菜单项一次并单击第一个深度级别的菜单项时，所有菜单项都会显示，直到深度级别 4。

点击menu-item1>menu-item1.2>menu-item1.2.2>menu-item1.2.2.2

现在点击 menu-item1.2 两次（显示所有子项，而不仅仅是 menu-item1.2.1 和 menu-item1.2.2）

我在哪里做错了？

$(document).ready(function(){
  
  $('.menu-item').click(function(event){
    event.stopPropagation();
    $(this).toggleClass('active');
    $('.col ul li').removeClass('active');
    
  });
  
  
  $('.col ul li').click(function(event){   
 
    event.stopPropagation();
    $(this).toggleClass('active');    
     $('.col ul li ul').removeClass('active');
  });
  
  
  $('.col ul li ul').click(function(event){   
 
    
    $(this).toggleClass('active');
  });
  
   $('.col ul ul li ul').click(function(event){   

    $(this).toggleClass('active');
  });
 
});

.menu>li {
  display: inline-block;
  padding: 10px 20px;
}

.dropdown > .col {
  display: none;
}

.visible {
  display: block;
}

.col {  
  position: absolute;
  top: 100px;
  display: block;
}

.sub-col {
  position: absolute;
  left: 150px;
  top: 0;
   display: none;
  
}


.sub-sub-col {
  position: absolute;
  left: 150px;
  top: 0;
   display: none;
}
.sub-sub-sub-col {
  position: absolute;
  left: 150px;
  top: 0;
   display: none;
  
}

.active .col {
  display: block;
}
.col .active .sub-col{
  display: block;
}

.col .sub-col .active .sub-sub-col {
  display: block;
}
 .col .sub-col .sub-sub-col .active .sub-sub-sub-col{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li class="menu-item"><a href="#">Menu-item-1</a>
    <div class="dropdown">
      <div class="col">
        <ul>
            <li>menu-item: 1.1</li>

            <li>menu-item: 1.2        
              <div class="sub-col">
                <ul>
                    <li>menuitem1.2.1</li>
                    <li>menuitem1.2.2
                      <div class="sub-sub-col">
                        <ul>
                            <li>menuitem1.2.2.1</li>
                            <li>menuitem1.2.2.2
                              <div class="sub-sub-sub-col">
                                <ul>
                                    <li>menuitem1.2.2.2.1</li>
                                    <li>menuitem1.2.2.2.2</li>
                                </ul>
                              </div>
                          </li>
                        </ul>
                      </div><!--sub-sub-col-->
                    </li>   
                </ul>
              </div><!--sub-col-->
            </li>

        </ul>
      </div>  <!--col-->  
  </div><!--dropdown-->
    
  </li>
  <li class="menu-item"><a href="#">Menu-item-2</a></li>
</ul>

Answer 1

试试这个

将.col ul ul li 更改为.col ul li ul 并将.col ul ul ul li 更改为.col ul ul li ul

$(document).ready(function() {

  $('.menu-item').click(function(event) {
    event.stopPropagation();
    $(this).toggleClass('active');
    $('.col ul li').removeClass('active');

  });


  $('.col ul li').click(function(event) {

    event.stopPropagation();
    $(this).toggleClass('active');

  });


  $('.col ul li ul').click(function(event) {


    $(this).toggleClass('active');
  });

  $('.col ul ul li ul ').click(function(event) {

    $(this).toggleClass('active');
  });
});

.menu>li {
  display: inline-block;
  padding: 10px 20px;
}

.dropdown>.col {
  display: none;
}

.visible {
  display: block;
}

.col {
  position: absolute;
  top: 100px;
  display: block;
}

.sub-col {
  position: absolute;
  left: 150px;
  top: 0;
  display: none;
}

.sub-sub-col {
  position: absolute;
  left: 150px;
  top: 0;
  display: none;
}

.sub-sub-sub-col {
  position: absolute;
  left: 150px;
  top: 0;
  display: none;
}

.active .col {
  display: block;
}

.col .active .sub-col {
  display: block;
}

.col .sub-col .active .sub-sub-col {
  display: block;
}

.col .sub-col .sub-sub-col .active .sub-sub-sub-col {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li class="menu-item"><a href="#">Menu-item-1</a>
    <div class="dropdown">
      <div class="col">
        <ul>
          <li>menu-item: 1.1</li>

          <li>menu-item: 1.2
            <div class="sub-col">
              <ul>
                <li>menuitem1.2.1</li>
                <li>menuitem1.2.2
                  <div class="sub-sub-col">
                    <ul>
                      <li>menuitem1.2.2.1</li>
                      <li>menuitem1.2.2.2
                        <div class="sub-sub-sub-col">
                          <ul>
                            <li>menuitem1.2.2.2.1</li>
                            <li>menuitem1.2.2.2.2</li>
                          </ul>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <!--sub-sub-col-->
                </li>
              </ul>
            </div>
            <!--sub-col-->
          </li>

        </ul>
      </div>
      <!--col-->
    </div>
    <!--dropdown-->

  </li>
  <li class="menu-item"><a href="#">Menu-item-2</a></li>
</ul>