한 번에 메뉴 하나만 드롭 다운

지금까지 나는이 drop-down menu 있습니다. "Menu", "Menu1"또는 "Menu2"를 클릭하면 그 아래의 링크가 드롭 다운됩니다.한 번에 메뉴 하나만 드롭 다운

문제 : 한 번에 하나의 드롭 다운 만 표시하면 사용자가 전환 할 수 있습니다.

overflow: visible !important;이 .clicked 클래스에 적용 되었기 때문에 현재 메뉴에 css('overflow', 'hidden');을 적용하려고했지만 작동하지 않습니다. 도와주세요. 무엇이든 높이 평가 될 것입니다.

출처

2014-04-25 Marek

을 종료 할 수 있습니다 (10). 여기 솔루션입니다 - http://stackoverflow.com/questions/23270323/click-to-expand-shall-result-in-collapsing-other-opened-items – Orahmax

시간에 도움이되지 못했습니다 ... 당신의 HTML은 정말 읽기가 힘듭니다. 정말 많은 ul/li이 필요하십니까? o_O ' – Apolo

@Apolo 아직 기회가 있습니다 :) 두 번째 클릭시 메뉴가 닫혀 야하므로 토글 클래스를 고수해야합니다. 그리고 네, 마크 업은 동일하게 유지되어야합니다. – Marek

당신이 요소를 클릭 모든 요소에서 class clicked를 제거하고 클릭 요소에 class clicked를 추가 할 때 시도하면 두 번째에 또한 원하는 경우

$("#product-menu>ul>li").click(function() { 
    var hidden = $(this).find('.clicked'); 
    $("#product-menu>ul>li").removeClass('clicked'); 
    $(this).addClass('clicked'); 
    $('.productSubmenu').width(menuWidth); 
});

DEMO

UPDATE

닫혀있는 메뉴를 클릭하십시오. 이미 클릭 된 항목이 있는지 확인하십시오. class clicked :

$("#product-menu>ul>li").click(function() { 
    var hidden = $(this).find('.clicked'); 
    if ($(this).hasClass('clicked')) { 
     $(this).removeClass('clicked') 
    } else { 
     $("#product-menu>ul>li").removeClass('clicked'); 
     $(this).addClass('clicked'); 

    } 
    $('.productSubmenu').width(menuWidth); 
});

DEMO2

출처

2014-04-25 11:09:24 laaposto

부분적으로 수정되지만 두 번째 클릭도 닫을 수있는 메뉴가 필요합니다. – Marek

해결됨, 가능한 경우 답변으로 표시합니다. 고마워요! – Marek

당신은 또한 당신이 jQuery를 사용하여이를 달성 할 수있는 링크

$("#product-menu>ul>li").click(function() { 
    var hidden = $(this).find('.clicked'); 
    $("#product-menu>ul>li").removeClass('clicked'); 
    $("#product-menu .productSubmenu2").hide(); // this one I added 
    $(this).addClass('clicked'); 
    $('.productSubmenu').width(menuWidth); 
});

출처

2014-04-25 11:14:52

한 번에 메뉴 하나만 드롭 다운

답변

관련 문제