jQuery 메뉴 트리, 위/아래로 밀어 넣습니다

Question

jQuery Dropdow 메뉴를 만들려고 노력하고 있습니다. 지금까지 잘 작동합니다. 폴더/나무 만 열 수 있다는 점을 제외하고는 다시 닫을 수 없습니다. jQuery에서 EQ 또는 형제 자매를 사용해야한다고 생각합니까? 그러나 확실하게 나는 그것들을 합치는 방법을 모른다 - 누구든지 보여줄 수 있습니까? :)

<ul class="nav">
    <li><a href="#">Test link</a></li>
    <ul class="nav">
        <li>Test under</li>
    </ul>
</ul>

jQuery(document).ready(function(){
    jQuery('.nav ul').css('display', 'none');

    jQuery('.nav li').click(function(){
        jQuery(this).find('ul:first').slideDown(); 
    })

})

// 사이먼

Answer 1

마크 업에 구문 오류가 있습니다. <ul> 요소입니다 <li>. 목록을 중첩하려면 <li> 그 자체:

<ul class="nav">
    <li>
        <a href="#">Test link</a>
        <ul class="nav">
            <li>Test under</li>
        </ul>
    </li>
</ul>

토글링을 위해, 우리는 단순히 형제 자매를 검색하도록 지시합니다. <ul> 요소를 적용하십시오 .slideToggle() 링크를 클릭 할 때 메소드 :

$(function() {
    // Hide submenus
    $(".nav ul").hide();

    // Toggle nested <ul> (siblings of the link)
    $(".nav > li > a").click(function(e) {
        $(this).siblings("ul").slideToggle();
        e.preventDefault();
    });
});

데모 바이올린은 다음과 같습니다. http://jsfiddle.net/teddyrised/2y9fz/ (효과를 입증하기 위해 더 많은 목록 항목 추가)

Answer 2

사용 slideToggle(); 대신에 slideDown();, 이것은 현재 방향에 따라 슬라이드 타운 또는 슬라이드 업을 수행 할 수 있도록합니다.

Answer 3

이것은 도움이 될 것입니다

각 부분에는 레이블이 붙어 있으므로 이해하기 쉽습니다. 이것은 단지 사용하는 것보다 훨씬 더 잘 알고 생각합니다. slideToggle. 대신 그것은 뚜렷하게 미끄러 져 나오는 상황을 생성하고 다른 분기를 선택할 때 이전 브랜치를 되돌립니다.

$('.nav ul').each(function () {
    $(this).on('click', function(e) {
        e.stopPropagation();//ignore ul clicks
    }).parent().on('click', function () {//target only parents of a ul
        if($(this).hasClass('on')) {//if selected
            $(this).addClass('on').children('ul').slideUp();//slideup
        } else {//if not selected
            if($(this).parent('.nav')) {//if start of branch
                $(this).parent().find('.on').removeClass('on').find('ul').slideUp();//close other branches
            }
            $(this).addClass('on').children('ul').slideDown();//slideDown
        }
    });
});

재귀 적이며 목표 만 목표로합니다 li 그건 a ul 어린이. 다른 지점을 선택하면 이전에 열린 개설 된 브랜치도 되돌립니다. 나는 그것을 제거했다 anchor 행동이 켜져 있었기 때문에 태그 click, 그리고 예제의 링크는 아무데도 가지 않았습니다. 아무데도 가지 않으면 왜 링크가 필요합니까?

또한 수정합니다 html 포맷, ul내부 liS, 그들 대신 형제 자매가 아닙니다. 즉 <li><ul><li></li></ul></li> 대신에 <li></li><ul><li></li></ul>.

바이올린을 만들었습니다. http://jsfiddle.net/filever10/gml4x/