jQuery로 여러 부모를 이사 - 더 효율적인 방법?

StackOverflow https://stackoverflow.com/questions/2053190

문제

그래서 저는 목록이고 하위 목록과 하위 목록이있는 탐색이 있습니다.

기본적으로 NAV는 기본적으로 무너졌지만 사람들이 하위 목록에있는 페이지를 클릭하면 부모 목록을 표시하고 싶습니다. 그리고 그것이 Subrist의 Subrist라면, 나는 두 가지 부모 목록이 필요합니다. 나는 그것을 설정했지만, 5.parent (). parent ()를 위로 향하게하여 목록을 확장하는 것을 좋아하지 않습니다. 더 효율적인 방법이 있습니까?

HTML :

<div id="lesson-sidebar">
        <ul>
            <li><a href="index.html">Welcome to Beat Basics and Beyond</a></li>
            <li><a href="table-of-contents.html">What's in this course?</a></li>
            <li><a href="defining-your-beat.html" class="active">Defining Your Beat</a>
                <ul>
                    <li><a href="boundaries-of-your-beat.html">Boundaries of Your Beat</a></li>
                    <li><a href="the-beat-description.html">The Beat Description</a></li>
                    <li><a href="build-your-own-beat-description.html"><span class="ital">Activity:</span> Build Your Own Beat Description</a></li>
                </ul>
            </li>
            <li><a href="getting-started.html">Getting Started</a>
                <ul>
                    <li><a href="debrief-your-predecessor.html">Debrief Your Predecessor</a></li>
                    <li><a href="predecessor-top-five-tips.html"><span class="ital">Activity:</span> List The Top Five Tips From Your Predecessor</a></li>
                    <li><a href="covering-your-beat-with-the-internet.html">Covering Your Beat With The Internet</a></li>
                    <li><a href="get-in-the-car-and-go.html">Get in the Car and Go</a></li>
                    <li><a href="mapping-your-beat.html">Mapping Your Beat</a></li>
                    <li><a href="read-the-clips.html">Read the Clips</a></li>
                    <li><a href="activity-dissect-this-clip.html"><span class="ital">Activity:</span> Dissect This Clip</a></li>
                    <li><a href="writing-your-first-article.html">Writing Your First Article</a></li>
                    <li><a href="starting-cold-on-the-beat.html">Starting Cold on the Beat</a></li>
                </ul>           
            </li>
            <li><a href="working-with-sources.html">Working With Sources</a>
                <ul>
                    <li><a href="finding-sources.html">Finding Sources</a></li>
                    <li><a href="diversify-your-sources.html">Diversify Your Sources</a></li>
                    <li><a href="prospecting-for-stories-and-sources.html">Prospecting for Stories and Sources</a></li>
                    <li><a href="building-relationships.html">Building Relationships</a></li>
                    <li><a href="going-off-the-record.html">Going Off the Record</a></li>
                </ul>
            </li>
            <li><a href="developing-resources.html">Developing Resources to Help You on the Beat</a>
                <ul>
                    <li><a href="develop-a-calendar-of-events.html">Develop a Calendar of Events</a></li>
                    <li><a href="build-your-library.html">Build Your Library</a></li>
                    <li><a href="learn-the-open-record-laws.html">Learn the Open Record Laws</a></li>
                </ul>
            </li>
            <li><a href="extra-resources.html">Extra Resources</a>
                <ul>
                    <li><a href="beat-breakdown-tool.html">Beat Breakdown Tool</a></li>
                    <li><a href="links-library.html">Links Library</a>
                        <ul>
                            <li><a href="general-resources-for-any-beat.html">General Resources for Any Beat</a></li>
                            <li><a href="courts-and-criminal-justice-links.html">Courts and Criminal Justice Links</a></li>
                            <li><a href="education-resources.html">Education Resources</a></li>
                            <li><a href="local-government-links.html">Local Government Links</a></li>
                            <li><a href="neighborhood-or-suburban-links.html">Neighborhood or Suburban Links</a></li>
                            <li><a href="police-and-public-safety-links.html">Police and Public Safety Links</a></li>
                            <li><a href="reporter-organizations.html">Reporter Organizations</a></li>
                        </ul>
                    </li>
                    <li><a href="additional-reading.html">Additional Reading</a></li>
                </ul>
            </li>
            <li><a href="final-thoughts.html">Final Thoughts</a></li>
        </ul>

jQuery :

function toggleSubmenu() {

    if ($(this).hasClass('submenu-hidden')) {

        $(this).parent().children('ul').slideToggle();
        $(this).removeClass().addClass('submenu-visible');

    } else if ($(this).hasClass('submenu-visible')) {

        $(this).parent().children('ul').slideToggle();
        $(this).removeClass().addClass('submenu-hidden');
    }
}

$('#lesson-sidebar ul ul').hide();
$('#lesson-sidebar ul ul ul').hide();
$('#lesson-sidebar ul:first-child').attr('id', 'rootlist');
$('#lesson-sidebar ul li:has("ul")').prepend('<span class="submenu-hidden"></span>').css('list-style','none');

$('#lesson-sidebar ul li a').each(
    function() {
        if ($(this).hasClass('active')) {
            // if it is a UL
            var length = $(this).parent().find("ul").length;
            alert(length);
            if (length == 0) {
                if ($(this).parent().parent().parent().children('span').hasClass('submenu-hidden')) {
                        $(this).parent().parent().parent().children('ul').show();
                        $(this).parent().parent().parent().children('span').removeClass('submenu-hidden').addClass('submenu-visible');
                }
                if ($(this).parent().parent().parent().parent().parent().children('span').hasClass('submenu-hidden')) {
                        $(this).parent().parent().parent().parent().parent().children('ul').show();
                        $(this).parent().parent().parent().parent().parent().children('span').removeClass('submenu-hidden').addClass('submenu-visible');
                } 
            }
            if (length == 1) {
                $(this).parent().find('ul').slideToggle();
                $(this).parent().children('span').removeClass('submenu-hidden').addClass('submenu-visible');
            }               
        }
    }
);

$('ul#rootlist > li span, ul#rootlist li ul li > span').bind('click', toggleSubmenu);

모든 도움은 주로 감사합니다.

도움이 되었습니까?

해결책

당신이하려는 일을 이해한다면 ... 당신은 다음과 같은 일을 할 수 있습니다.

// For my benefit, hide all lists except the root items
$('ul, li', $('#lesson-sidebar ul li')).hide();

// Show active parents and their siblings
$('li a.active').parents('ul, li').each(function() {
    $(this).siblings().andSelf().show();
});

// Show the active item and its siblings
$('li a.active').siblings().andSelf().show();

그만큼 부모님() 그리고 형제() 방법은 모두 이런 종류의 일에 좋습니다.

편집 : 부모 형제 자매를 보여주지 않은 버그가있었습니다. 이 새 버전을 시도하십시오.

편집 2 : 이제 목록 항목 대신 앵커에서 class = "active"와 함께 작동합니다.

다른 팁

$(this).closest("ul") 부모가 찾을 때까지 부모를 가로 질러옵니다 ul

http://docs.jquery.com/traversing/closest#expr

... 요소 자체를 테스트하고 Dom Tree의 조상을 통과하여 선택기와 일치하는 첫 번째 요소를 얻으십시오 ...

Lance McNeary의 매우 유용한 답변을 단순화하려면 다음과 같은 요령을 사용하는 것입니다.

.parents([selector])

DOM 요소 세트를 나타내는 jQuery 객체가 주어지면 .parents () 메소드를 사용하면 DOM 트리의 이러한 요소의 조상을 검색하고 직계 부모가 주문한 일치하는 요소에서 새로운 jQuery 객체를 구성 할 수 있습니다. 요소는 가장 가까운 부모부터 외부 부모로 순서대로 반환됩니다.

다른 사용자가 제안했습니다.

.closest([selector])

.parents ()와 유사하게, 이것은 찾고있는 요소를 찾으면 중지되므로 더 나은 선택 일 수 있습니다. 이 경우 더 효율적인 것 같습니다. 보다 http://api.jquery.com/closest/ 자세한 사항은. 이것이 사람들이 .closest ()와 .parents ()의 차이점과 얼마나 강력하고 유연한 jQuery의 차이를 이해하는 데 도움이되기를 바랍니다.

$(this).parents().get()[4] 다섯 번째를 줄 것입니다

이 코드 라인을 사용해보십시오.

$(this).parent().parent().fadeOut();
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top