버튼을 클릭 한 후 설정 "표시 : 없음"

Question

태그 위의 표시/숨기기 버튼을 클릭하면 정상적으로 작동합니다. 그러나 그 아래의 버튼 (앞면 가득 차 있음)은 태그의 내용을 숨기지 않습니다. 시작 태그 위의 버튼을 움직이면 작동합니다. 어떻게 위의 숨기기 태그에 연결할 수 있습니까?

<input type="button" onclick="show(this);" value="show"/> 
<input type="button" onclick="hide(this);" value="hide"/> 

<hide class="inner" style="display.none;"> 
<input type="button" onclick="showSpoiler1(this);" value="Front flip variaion (ramp)" /> 
<input type="button" onclick="showSpoiler2(this);" value="Front flip variaion (flat)" /> 
<input type="button" onclick="showSpoiler3(this);" value="Backflip variations" /> 
<input type="button" onclick="showSpoiler4(this);" value="Sideflip Variations (ramp)" /> 
<input type="button" onclick="showSpoiler5(this);" value="Twists and other tricks" /> 

<div1 class="inner" style="display:none;"> 
    <ul> 
     <input type="button" onclick="hide(this);" value="Front full"/> 
     <li>Double Front</li> 
     <li>Aerial Twist</li> 
    </ul> 
</div1> 
</hide> 

JS

function show(obj) 
    { 
    var inner = obj.parentNode.getElementsByTagName("hide")[0]; 
     inner.style.display = ""; 
    } 


function hide(obj) 
    { 
    var inner = obj.parentNode.getElementsByTagName("hide")[0]; 
     inner.style.display = "none"; 
    } 

Answer 1

, 당신은 : 함수에서 다음

<div1 class="inner" style="display:none;"> 
    <ul> 
     <input type="button" onclick="hide(this);" value="Front full"/> 
     <li>Double Front</li> 

:

function show(obj) 
    { 
    var inner = obj.parentNode.getElementsByTagName("hide")[0]; 

버튼을 클릭 때, OBJ입니다 버튼에 대한 참조. 부모 노드는 버튼이 UL 요소의 자식 일 수 없기 때문에 오류 수정으로 삽입되는 LI입니다. 해당 부모 노드에는 하위 "숨김"요소가 없습니다.

버튼이 UL의 하위 항목 이었더라도 어린이도 숨겨져 있지 않습니다. 대신 고려 :

var inner = document.getElementsByTagName("hide")[0]; 

Answer 2

당신이 할 수없는 당신이 그것이 무엇을하는가 숨 깁니다 무엇인지에 꽤 특정로 두 버튼에 대해 동일한 hide() 기능. 모든 버튼이 같은 일을 숨길 생각하는 경우

function hideParent(obj) 
    { 
    var inner = obj.parentNode.parentNode; 
     inner.style.display = "none"; 
    } 


<hide class="inner" style="display.none;"> 
... 
<div1 class="inner" style="display:none;"> // <- assuming this is what this supposed to nbe hidden 
    <ul> 
     <input type="button" onclick="hideParent(this);" value="Front full"/> 
     <li>Double Front</li> 
     <li>Aerial Twist</li> 
    </ul> 
</div1> 
</hide> 

- <hide> 요소는 다음과 같은 일을 수행합니다 : 왜 당신이 뭔가를 시도하지 않는 것이 좋습니다 다른 의견과 같은

function hide(obj) 
    { 
     var inner = getElementbyTagName("body").getElementsByTagName("hide")[0]; 
     inner.style.display = "none"; 
    } 

을, 단지 <div>를 사용 <hide>를 사용하지 않는 다음 귀하의 hide 및 show 기능은 자녀 hide 태그를 찾을에서 getElementById

Answer 3

를 사용 버튼의 부모, 즉 버튼의 형제 자매. 버튼의 부모는 div이고, div의 부모는 hide입니다. 당신이 그것을 포함 숨기기 요소에 영향을 미칠 수있는 버튼을 원하는 경우

때문에, 그것은 숨기기 요소를 찾을 때까지 당신이 DOM 계층 구조에 점진적으로 높은 반복 숨김/표시 기능을 변경할 수 hide(this.parentNode.parentNode)

을 시도하거나 그것은 형제 자매, 부모, 그리고 형제 자매에게 효과적입니다. 아마도 뭔가 같은 : 아래의 버튼에서

function hide(obj) 
    { 
    if (obj !== document) 
    { 
    var parent = obj.parentNode; 
    var inner = parent.getElementsByTagName("hide"); 
    if (inner.length > 0) 
    { 
     inner[0].style.disply = "none"; 
    } else { 
     hide(parent) 
    } 
    } 
    }