html 축소/확장 트리

html로 트리를 생성하려면 this 코드를 사용하고 있습니다. 문제는 트리가 확장 될 때마다 페이지가 새로 고쳐질 때입니다.html 축소/확장 트리

페이지를 열 때 일부 분기가 확장되고 일부 분기가 축소되어 일부 속성이 축소되도록 만듭니다. 예를 들어

<span><i class="icon-plus-sign"></i> Parent 1</span> 
    <ul> childrens go here 
    </ul> 
<span><i class="icon-minus-sign"></i> Parent 2</span> 
    <ul> childrens go here 
    </ul>

내가 페이지를 열 때, 나는 부모 2의 아이를보고 싶어하지만 부모 1의.

저는 HTML로 초보자이며 완전히 CSS와 자바 스크립트에 익숙합니다. 그래서 어떤 제안이라도 도움이 될 것입니다.

출처

2014-04-28 Alexandru Severin

어른 용 Upvote –

쿠키를 사용해야한다고 생각합니다. –

당신의 바이올린을 보면서, 그것은 전혀 초보자 작품처럼 보이지 않습니다. 단지 .. .. – LifeQuery

당신은 코드의 마지막의 시작 부분에 추가 할 수 있습니다 각 요소 마크는 아이콘 클래스를 사용하여 축소되었습니다.

코드 :

$('.tree li.parent_li > span').each(function(i,e){ 
    if ($(this).find('i').hasClass("icon-plus-sign")){ 
     $(this).parent('li.parent_li').find(' > ul > li').hide(); 
    } 
});

데모 : http://jsfiddle.net/q3DQ2/

출처

2014-04-28 14:15:01

당신의 OnClick 함수 후 다음과 같은 권리를 추가

//Collapse each node 
$('.tree li.parent_li > span').each(function(){ 
    var children = $(this).parent('li.parent_li').find(' > ul > li'); 
    children.hide('fast'); 
    $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); 
});

을 그것이 각 노드를 통해 이동하고 숨길 수와 함께.

는 기본적으로 그것을 가지고하는 것입니다 할 수있는 또 하나의 방법은 숨겨진 수 : 각 노드에서

style="display: none;"

당신이 원하는 숨겨진

출처

2014-04-28 14:12:26 Solon

만약 내가 제대로 이해하고, 당신이 그들을 페이지로드에 폐쇄되게합니다 특정 요소에 클래스를 추가하려면?

가장 간단한 해결책은 JQuery와의 바닥에

$(".start-closed").click();

를 추가 한 다음 페이지로드에 닫으려는 노드 클래스 start-closed를 추가하는 것입니다.

JSFiddle : http://jsfiddle.net/dksNr/

내가 질문을 잘못 이해 한 경우 알려주세요.

출처

2014-04-28 14:16:50

html 축소/확장 트리

답변

관련 문제