두 개의 하위 메뉴를 사용하여 메뉴 만들기

이 메뉴를 쓰면 두 번째 하위 메뉴에 문제가 있습니다. 두 번째 하위 메뉴 항목을 열 수 없습니다. 내가 무엇을 할 수 있을지???두 개의 하위 메뉴를 사용하여 메뉴 만들기

<div id='cssmenu'> 
        <ul> 
         <li class='active'><a href='index.html'><span>normal menu</span></a></li> 

         <li class='has-sub'><a href='#'><span>menu with sub menu</span></a> 
          <ul> 
           <li><a href='#'><span>first sub menu</span></a></li> 
           <ul> 
            <li><a href='#'><span>second sub menu</span></a></li> 
           </ul> 
           <li><a href='#'><span>normal menu</span></a></li> 
           <li class='last'><a href='#'><span>normal menu</span></a></li> 
          </ul> 
         </li> 
        </ul> 
       </div>

JQuery와-1.7.2.min.js를 사용하고이 내 jaquery 코드입니다 : 내가 클릭 한 후

$(document).ready(function() { 
    $('#cssmenu > ul > li > a').click(function() { 
     $('#cssmenu li').removeClass('active'); 
     $(this).closest('li').addClass('active'); 
     var checkElement = $(this).next(); 
     if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
      return false; 
     } 
     if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
      $('#cssmenu ul ul:visible').slideUp('normal'); 
      checkElement.slideDown('normal'); 
      return false; 
     } 
    }); 
});

출처

2013-09-23 Vahid Akbari

http://jsfiddle.net/PVH5U/

$(document).ready(function() { 
    $('.has-sub > a').click(function() { 
     var submenu = $(this).next(); 
     if(submenu.is(":visible")){ 
      submenu.slideUp(); 
     } 
     else{ 
      submenu.slideDown(); 
     } 
    }); 
});

출처

2013-09-23 14:39:34 pckill

그것을 열고 닫은 하위 메뉴 !!! –

바깥 쪽 메뉴가 닫혀있을 때 안쪽 메뉴를 닫을 필요가 있다는 것을 의미합니까? 여기에 당신이 간다 : http://jsfiddle.net/PVH5U/1/ – pckill

나는 이것과 함께 두 가지 문제가있다 : 1 on 슬라이드 업 스크롤바 2-on changein 페이지 또는 relod 페이지 닫기 서브 메뉴 .i 추적 slideup 기능에서 발생하지 않습니다. 왜 하위 메뉴 닫기 ??? –

just try this format of coding 
html 



     <div id="menu"> 
    <ul id="sub"> 

    <li>one</li> 
    <li>two</li> 
    <li>three<ul id="second"> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    </ul></li> 
    <li>Four</li> 
    <li>five</li> 
    <li>six</li> 

    </ul> 
    </div> 

css 



    #menu{width:800px;height:82px;background-color:#666666;margin:0px 0px 0px 0px; border-radius:30px; text-align:center;} 
    #menu ul {margin:0px;padding:0px;} 
    #menu ul li{ border-radius:0px;float:left;list-style:none;margin:0px 4px 0px 4px; width:191px; padding-top:30px; height:50px;background-color:#99CC00; position:relative;} 
    #menu ul li a{ text-decoration: none !important;} 
    #menu ul li:hover{display:inline;background-color:#CCCCCC;border-radius:0px;margin:0px 4px 0px 4px; width:191px; height:45px;} 


    /* first select menu */ 

    ul.sub li{ background-color:#00CCFF; display:inline; } 
    ul.sub li{margin:25px 0px 0px 0px; padding:0px 10px 0px 0px; position:absolute; } 
    .hover ul.sub li{ display: block;position:relative;/*relative*/ float:none; margin:0px 0px 0px 29px; 
    padding:3px 2px 2px 0px; width:150px; height:20px; } 

    /* second select menu */ 
    .second li{ display:none;position:relative; float:none; height:35px; 
    margin:1px 0px 0px 8px; padding:10px 0px 10px 0px;} 
    .second li{ display: block; background-color:red; } 
    .second{ position:relative; height:35px; margin:0px 0px 0px 4px;  padding:0px 0px 0px 0px;}

출처

2014-01-28 06:12:01 user3209468

두 개의 하위 메뉴를 사용하여 메뉴 만들기

답변

관련 문제