導航菜單，如果它有子子菜單

我上有四個深層次的，我在一次顯示3個深度等級，當用戶進入深度4級，第1深度創建一個導航菜單的工作級別應向左移動並僅顯示第2,3,4層深度。導航菜單，如果它有子子菜單

但我現在面臨這裏的問題是，在depthlevel-3菜單項的點擊（不生孩子）也將菜單向左移動。

即點擊Menu-item1> Menu-item1.2> Menu-item1.2.2> Menu-item1.2.2.1 這裏菜單項1.2.2.1沒有子菜單，菜單也向左移動

所以特別，我怎麼能打動我的菜單左邊，如果只有孩子子菜單？

這裏是我的代碼：

$(document).ready(function(){ 
 
    
 
    $('.menu-item').click(function(event){ 
 
    event.stopPropagation(); 
 
    $('.dropdown',this).slideToggle(300); 
 
    $('.col ul li').removeClass('active'); 
 
    $(this).siblings().find(".dropdown").hide();  
 
    }); 
 
    
 
    /*sub-col-1.2*/ 
 
    $('.col ul li').click(function(event){ 
 
    event.stopPropagation(); 
 
    $(this).toggleClass('active'); 
 
    $(this).siblings().find("li").removeClass('active'); 
 
    //$('.sub-col li').removeClass('active'); 
 
    //$(this).children().find(".sub-sub-sub-col").hide(); 
 
    
 
    }); 
 
    
 
    /*sub-sub-col*/ 
 
    $('.col ul li ul').click(function(event){ 
 
    event.stopPropagation(); 
 
    $(this).toggleClass('active'); 
 
    }); 
 
    
 

 
    $('.sub-sub-col > ul > li').click(function() { 
 
    var clicks = $(this).data('clicks'); 
 
     if (clicks) { 
 
     $('.dropdown').animate({ 
 
      'left' : '0px' 
 
     }) 
 
     } 
 
     else { 
 
     $('.dropdown').animate({ 
 
      'left' : '-510px' 
 
     }) 
 
     } 
 
    $(this).data("clicks", !clicks); 
 
}); 
 

 

 
    
 
    
 
    /*sub-sub-sub-col*/ 
 
    $('.col ul ul li ul').click(function(event){ 
 
    event.stopPropagation(); 
 
    $(this).toggleClass('active'); 
 
    }); 
 
    
 
});

/* http://meyerweb.com/eric/tools/css/reset/ 
 
    v2.0 | 20110126 
 
    License: none (public domain) 
 
*/ 
 

 
html, body, div, span, applet, object, iframe, 
 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
 
a, abbr, acronym, address, big, cite, code, 
 
del, dfn, em, img, ins, kbd, q, s, samp, 
 
small, strike, strong, sub, sup, tt, var, 
 
b, u, i, center, 
 
dl, dt, dd, ol, ul, li, 
 
fieldset, form, label, legend, 
 
table, caption, tbody, tfoot, thead, tr, th, td, 
 
article, aside, canvas, details, embed, 
 
figure, figcaption, footer, header, hgroup, 
 
menu, nav, output, ruby, section, summary, 
 
time, mark, audio, video { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
/* HTML5 display-role reset for older browsers */ 
 
article, aside, details, figcaption, figure, 
 
footer, header, hgroup, menu, nav, section { 
 
\t display: block; 
 
} 
 
body { 
 
    font-family: 'Mada', sans-serif; 
 
    font-weight: 600; 
 
\t line-height: 1; 
 
} 
 
ol, ul { 
 
\t list-style: none; 
 
} 
 
blockquote, q { 
 
\t quotes: none; 
 
} 
 
blockquote:before, blockquote:after, 
 
q:before, q:after { 
 
\t content: ''; 
 
\t content: none; 
 
} 
 
table { 
 
\t border-collapse: collapse; 
 
\t border-spacing: 0; 
 
} 
 

 
/*Container 
 
===============*/ 
 

 
.container { 
 
    position: relative; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.inner { 
 
    position: relative; 
 
    width: 1500px; 
 
    margin: 0 auto; 
 
} 
 

 
.menu { 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 
.menu li a { 
 
    text-decoration: none; 
 
    font-size: 23px; 
 
    color: #00A0F0; 
 
    transition: all 0.3s linear; 
 
} 
 
.dropdown li a { 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
    color: #00A0F0; 
 
    transition: all 0.3s linear; 
 
} 
 
li a:hover { 
 
    color: #000; 
 
} 
 
.menu>li { 
 
    display: inline-block; 
 
    padding: 15px 20px; 
 
} 
 

 
.dropdown { 
 
    position: absolute; 
 
    top: 55px; 
 
    left: 0; 
 
    width: 100%; 
 
    text-align: left; 
 
    display: none; 
 
} 
 

 
.dropdown > .col { 
 
    display: block; 
 
} 
 

 

 
.visible { 
 
    display: block; 
 
} 
 

 
.col { 
 
    position: relative; 
 
    top: 0; 
 
    display: block; 
 
    width: 33%; 
 
    background-color: transparent; 
 
    z-index: 99; 
 
} 
 

 
.col > ul { 
 

 
} 
 
.col > ul > li { 
 
    padding: 20px 0px; 
 
    border-bottom: 1px dotted #ccc; 
 
} 
 
.sub-col > ul > li { 
 
    padding: 20px 0px; 
 
    border-bottom: 1px dotted #ccc; 
 
} 
 
.sub-sub-col > ul > li { 
 
    padding: 20px 0px; 
 
    border-bottom: 1px dotted #ccc; 
 
} 
 
.sub-sub-sub-col > ul > li { 
 
    padding: 20px 0px; 
 
    border-bottom: 1px dotted #ccc; 
 
} 
 
.col> ul > li:last-child { 
 
} 
 

 

 

 
.sub-col { 
 
    position: absolute; 
 
    left: 510px; 
 
    top: 0; 
 
    display: none; 
 
    width: 100%; 
 
    
 
    
 
} 
 

 
.sub-sub-col { 
 
    position: absolute; 
 
    left: 510px; 
 
    top: 0; 
 
    display: none; 
 
    width: 100%; 
 

 
} 
 
.sub-sub-sub-col { 
 
    position: absolute; 
 
    left: 510px; 
 
    top: 0; 
 
    display: none; 
 
    width: 100%; 
 
} 
 

 
.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; 
 
} 
 

 
.col,.sub-col,.sub-sub-col,.sub-sub-sub-col { 
 
    
 
} 
 

 
.iva-children-indenter { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 30%; 
 
    margin-top: 7px; 
 
    color: #00A0F0; 
 
    font-size: 20px; 
 
} 
 
.iva-children-indenter-2{ 
 
    position: absolute; 
 
    right: 0; 
 
    top: 30%; 
 
    font-size: 20px; 
 
    margin-top: 40px; 
 
    color: #00A0F0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://use.fontawesome.com/a2e210f715.js"></script> 
 
<link href="https://fonts.googleapis.com/css?family=Mada:400,500,600" rel="stylesheet"> 
 
<div class="container"> 
 
    <div class="inner"> 
 
    <ul class="menu"> 
 
     <li class="menu-item"><a href="#">Menu-item-1</a> 
 
      
 
      <div class="dropdown"> 
 
      <div class="col"> 
 
       <ul> 
 
       <li><a href="#">Menu-item: 1.1</a></li> 
 
       <li class="deeper-nav"><a href="#">Menu-item: 1.2<span class="iva-children-indenter"><i class="fa fa fa-angle-right"></i></span></a> 
 
        <div class="sub-col"> 
 
         <ul> 
 
         <li><a href="#">Menuitem1.2.1</a></li> 
 
         <li><a href="#">Menuitem1.2.2<span class="iva-children-indenter-2"><i class="fa fa fa-angle-right"></i></span> 
 
          <div class="sub-sub-col"> 
 
           <ul> 
 
           <li><a href="#">Menuitem1.2.2.1</a></li> 
 
           <li><a href="#">Menuitem1.2.2.2<span class="iva-children-indenter-2"><i class="fa fa fa-angle-right"></i></span> 
 
            <div class="sub-sub-sub-col"> 
 
            <ul> 
 
             <li><a href="#">menuitem1.2.2.2.1</a></li> 
 
             <li><a href="#">menuitem1.2.2.2.2</a></li> 
 
            </ul> 
 
            </div> 
 
            </a></li> 
 
           </ul> 
 
          </div><!--sub-sub-col--> 
 
          </a></li> 
 
         </ul> 
 
         </div><!--sub-col--> 
 
        </a></li> 
 
       <li><a href="#">Menu-item-1.3</a></li> 
 
       <li><a href="#">Menu-item-1.4</a></li> 
 
       </ul> 
 
       </div> <!--col--> 
 
      </div><!--dropdown--> 
 
      </li> 
 
     <li class="menu-item"><a href="#">Menu-item-2</a> 
 
      <div class="dropdown"> 
 
      <div class="col"> 
 
       <ul> 
 
       <li><a href="#">Menu-item: 2.1</a></li> 
 
       <li><a href="#">Menu-item: 2.2 <span class="iva-children-indenter-2"><i class="fa fa fa-angle-right"></i></span>  
 
        <div class="sub-col"> 
 
        <ul> 
 
         <li><a href="#">Menuitem2.2.1</a></li> 
 
         <li><a href="#">menuitem2.2.2<span class="iva-children-indenter-2"><i class="fa fa fa-angle-right"></i></span> 
 
         <div class="sub-sub-col"> 
 
          <ul> 
 
          <li><a href="#">Menuitem2.2.2.1</a></li> 
 
          <li><a href="#">Menuitem2.2.2.2 
 
           <!--<div class="sub-sub-sub-col"> 
 
           <ul> 
 
            <li><a href="#">menuitem1.2.2.2.1</a></li> 
 
            <li><a href="#">menuitem1.2.2.2.2</a></li> 
 
           </ul> 
 
           </div>--> 
 
           </a></li> 
 
          </ul> 
 
         </div><!--sub-sub-col--> 
 
         </a></li> 
 
        </ul> 
 
        </div><!--sub-col--> 
 
        </a></li> 
 
       </ul> 
 
      </div> <!--col--> 
 
      </div><!--dropdown--> 
 
     </li> 
 
     <li class="menu-item"> 
 
      <a href="#"><a href="#">Menu-item-3</a></a> 
 
     </li> 
 
     <li class="menu-item"> 
 
      <a href="#"><a href="#">Menu-item-4</a></a> 
 
     </li> 
 
    </ul> 
 
    </div><!--inner--> 
 
</div><!--container-->

Codepen Link Here

來源

2017-08-11 Bharath Kumar

試試這個：

$('.sub-sub-col > ul > li').click(function() { 
    if(!$(this).find('.sub-sub-sub-col').length){ 
     return false; 
    } 
    var clicks = $(this).data('clicks'); //continue your code 
});

或者：

if(!$(this).children('.sub-sub-sub-col').length){ 
    return false; 
}

============================================ ====

// if click on sub-col 
    $('.sub-col > ul > li').on('click', function(){ 
     if (!$(this).hasClass('active')) { 
     $('.dropdown').animate({ 
      'left' : '10px' 
     }) 
     } 
    }); 

    $('.sub-sub-col > ul > li').click(function() { 
    // var clicks = $(this).data('clicks'); 
     if (!$(this).hasClass('active')) { 
     $('.dropdown').animate({ 
      'left' : '10px' 
     }) 
     } 
     else { 
     $('.dropdown').animate({ 
      'left' : '-510px' 
     }) 
     } 
    // $(this).data("clicks", !clicks); 
});

來源

2017-08-11 11:52:37 Tard

https://codepen.io/bharathkumar_sriram/pen/vJZqEW?editors=1010在此單擊菜單，項目1>菜單項1.2>菜單item1.2.2>菜單條1/1 .2.2.2現在點擊Menu-item1兩次子菜單沒有打開可能是什麼問題？ –

菜單是開放，但它仍然在左 –

@BharathKumar我上面寫的。爲什麼使用.sub-sub-col> ul> li等？這是嚴格的約束。您可以爲所有家長和另一個班級使用一個班級作爲下拉菜單 – Tard

導航菜單，如果它有子子菜單

回答

相關問題