세 번째 수준의 메가 메뉴가 작동하지 않습니다.

Question

세 단계로 메뉴를 만듭니다. code in jsfiddle. 그러나 그것은 속성을 작동시키지 않습니다. digikala.com처럼 디자인하고 싶습니다. 하지만 문제가 있습니다. 메뉴의 세 번째 수준은 보여주지 않습니다. 도와주세요. 죄송합니다, html로 최신입니다.

<div class="navbar navbar-default yamm"> 
      <div class="navbar-header"> 
       <button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" 
         class="navbar-toggle"> 
        <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"> 
        </span> 
       </button> 
       <a href="#" class="navbar-brand">buy100</a> 
      </div> 
      <div id="navbar-collapse-grid" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="dropdown yamm-fw"> 
         <a href="#" data-toggle="dropdown" class="dropdown-toggle">منو اصلی<b class="caret"></b></a> 
         <ul class="nav navbar-nav dropdown-menu"> 
          <!-- Grid 12 Menu --> 
          <li class="dropdown yamm-fw"> 
           <a href="#" data-toggle="dropdown" class="dropdown-toggle">منو 1<b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li class="grid-demo"> 
             <div class="row"> 
              <div class="col-sm-12"> 
               .col-sm-12 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-sm-6"> 
               .col-sm-6 
              </div> 
              <div class="col-sm-6"> 
               .col-sm-6 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-sm-4"> 
               .col-sm-4 
              </div> 
              <div class="col-sm-4"> 
               .col-sm-4 
              </div> 
              <div class="col-sm-4"> 
               .col-sm-4 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-sm-3"> 
               .col-sm-3 
              </div> 
              <div class="col-sm-3"> 
               .col-sm-3 
              </div> 
              <div class="col-sm-3"> 
               .col-sm-3 
              </div> 
              <div class="col-sm-3"> 
               .col-sm-3 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-sm-2"> 
               .col-sm-2 
              </div> 
              <div class="col-sm-2"> 
               .col-sm-2 
              </div> 
              <div class="col-sm-2"> 
               .col-sm-2 
              </div> 
              <div class="col-sm-2"> 
               .col-sm-2 
              </div> 
              <div class="col-sm-2"> 
               .col-sm-2 
              </div> 
              <div class="col-sm-2"> 
               .col-sm-2 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-sm-1"> 
               .col-sm-1 
              </div> 
              <div class="col-sm-1"> 
               .col-sm-1 
              </div> 
              <div class="col-sm-1"> 
               .col-sm-1 
              </div> 
              <div class="col-sm-1"> 
               .col-sm-1 
              </div> 
              <div class="col-sm-1"> 
               .col-sm-1 
              </div> 
              <div class="col-sm-1"> 
               .col-sm-1 
              </div> 
              <div class="col-sm-1"> 
               .col-sm-1 
              </div> 
              <div class="col-sm-1"> 
               .col-sm-1 
              </div> 
              <div class="col-sm-1"> 
               .col-sm-1 
              </div> 
              <div class="col-sm-1"> 
               .col-sm-1 
              </div> 
              <div class="col-sm-1"> 
               .col-sm-1 
              </div> 
              <div class="col-sm-1"> 
               .col-sm-1 
              </div> 
             </div> 
            </li> 
           </ul> 
          </li> 
          <!--With Offsets 
          --> 
          <li class="dropdown yamm-fw"> 
           <a href="#" data-toggle="dropdown" class="dropdown-toggle"> منو2<b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li class="grid-demo"> 
             <div class="row"> 
              <div class="col-sm-4"> 
               4 
              </div> 
              <div class="col-sm-4 col-sm-offset-4"> 
               4 offset 4 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-sm-3 col-sm-offset-3"> 
               3 offset 3 
              </div> 
              <div class="col-sm-3 col-sm-offset-3"> 
               3 offset 3 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-sm-6 col-sm-offset-3"> 
               6 offset 6 
              </div> 
             </div> 
            </li> 
           </ul> 
          </li> 
          <!--Aside Menu 
          --> 
          <li class="dropdown yamm-fw"> 
           <a href="#" data-toggle="dropdown" class="dropdown-toggle">منو3<b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li class="grid-demo"> 
             <div class="row"> 
              <div class="col-sm-3"> 
               <br> 
               <h3> 
                3 
               </h3> 
               <br> 
              </div> 
              <div class="col-sm-9"> 
               <br> 
               <h3> 
                9 
               </h3> 
               <br> 
              </div> 
             </div> 
            </li> 
           </ul> 
          </li> 
          <!--Nesting Menu 
          --> 
          <li class="dropdown yamm-fw"> 
           <a href="#" data-toggle="dropdown" class="dropdown-toggle">منو4<b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li class="grid-demo"> 
             <div class="row"> 
              <div class="col-sm-12"> 
               12 
              </div> 
             </div> 
             <div class="row"> 
              <div class="col-sm-12"> 
               12 
               <div class="row"> 
                <div class="col-sm-4"> 
                 4 
                </div> 
                <div class="col-sm-4"> 
                 4 
                </div> 
                <div class="col-sm-4"> 
                 4 
                </div> 
               </div> 
              </div> 
             </div> 
            </li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
        <li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle"> lk,,,,</a></li> 
        <li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle"> lk,,,,</a></li> 
        <li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle"> lk,,,,</a></li> 
       </ul> 

      </div> 
     </div> 

Answer 1

마침내 내 대답을 찾았습니다. 당신은 여기에서 그것을 볼 수있다 mega menu in three level. 올바른 스크립트 :

<script> 
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     // If a menu is already open we close it 
     $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open'); 
     // opening the one you clicked on 
     $(this).parent().addClass('open'); 

     var menu = $(this).parent().find("ul"); 
     var menupos = menu.offset(); 

     if ((menupos.left + menu.width()) + 30 > $(window).width()) { 
      var newpos = -menu.width(); 
     } else { 
      var newpos = $(this).parent().width(); 
     } 
     menu.css({ left: newpos }); 

    }); 
</script>