목록에 div 표시/숨기기

나는 임의의 수의 항목 목록이 있습니다. 각 항목에는 여러 가지 작업을 수행 할 수 있습니다. 사용자가 특정 목록 항목과 연결된 링크를 클릭 할 때 나타나는 div에 해당 작업을 표시하려고합니다.목록에 div 표시/숨기기

다음 코드를 시도했지만 링크를 클릭하면 링크와 연결된 숨겨진 div가 아닌 첫 번째 숨겨진 div 만 표시됩니다. HERE

<script language="javascript"> 
function toggleOptions() { 
     var ele = this; 
     var text = this.parentNode.getElementsByClassName("displayOptions"); 


    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
    text.innerHTML = "TESTING"; 
    } 
    else { 
    ele.style.display = "block"; 
    text.innerHTML = "Hide GPS"; 
    } 
}

는 HTML된다. 목록은 끝이 없지만 목록의 발췌 일뿐입니다.

 <a href="javascript:toggleOptions();"> 
     ITEM 1 OPTIONS 
    </a> 
     <div class="toggleOptions" style="display: none"> 
     ITEM 1 OPTIONS 
    </div> 

    <a href="javascript:toggleOptions();"> 
     ITEM 2 OPTIONS 
    </a> 
    <div class="toggleOptions" style="display: none"> 
     ITEM 2 OPTIONS 
    </div> 

    <a href="javascript:toggleOptions();"> 
     ITEM 3 OPTIONS 
    </a> 
     <div class="toggleOptions" style="display: none"> 
     ITEM 2 OPTIONS 
    </div>

출처

2012-12-05 Die 20

당신이 HTML의 모습을 우리에게 보여줄 수이와

은

<div> <a href="#" onclick="toggleOptions(this);" style="display:block;"> SHOW </a> <div class="toggleOptions" style="display: none"> ITEM 1 OPTIONS </div> </div> <div> <a href="#" onclick="toggleOptions(this);" style="display:block;"> SHOW </a> <div class="toggleOptions" style="display: none"> ITEM 2 OPTIONS </div> </div> <div> <a href="#" onclick="toggleOptions(this);" style="display:block;"> SHOW </a> <div class="toggleOptions" style="display: none"> ITEM 3 OPTIONS </div> </div>

시도? – Stegrex

정말 원하는지 확인 ** document.getElementById (". toggleOptions"); **이 클래스는 toggleOptions 클래스가있는 요소를 가져올 때 나를 찾습니다. 그렇지 않으면 document.getElementsByClass ('toggleOptions ')하지만이 배열은 항상 배열이므로 원하는 것을 선택해야합니다 – Mik

Stegrex, 방금 HTML로 코드를 업데이트했습니다. Mik, 클래스를 사용하고 ClassName으로 시도했지만 숨겨진 div를 표시하거나 숨기지 않았습니다. –

각 그룹 주위에 다른 div 또는 뭔가 넣기 : toggleOptions() 함수를 onclick에 놓고 href를 # 전달하여 비어 있지 않도록 ... toggleOptions (this)를 클릭하여 어떤 요소가 클릭되었는지 알 수 있습니다. 여기 http://jsfiddle.net/YE6XZ/1/

function toggleOptions(e) { 
    var ele = e; 
    var text = e.parentElement.querySelector('.toggleOptions') 

if(text.style.display == "none") { 
    //ele.style.display = "none"; 
    text.style.display = "block"; 
    text.innerHTML = "TESTING"; 
    ele.innerHTML = "hide"; 
} 
else { 
    text.style.display = "none"; 
    //text.innerHTML = "Hide GPS"; 
    ele.innerHTML = "show"; 
} 

return false;

}

출처

2012-12-05 19:51:21 Mik

Mik 제안 된 변경 사항으로 초기 코드를 업데이트했습니다. 그것은 여전히 작동하지 않는 것 같습니다. –

새 버전을 사용해 보셨습니까 ..? 당신은 jsfiddle 링크에서 그것을 확인할 수 있습니다 – Mik

Mik, Nice man! 그러나 toggleOptions div가 표시 될 때 링크가 계속 표시되도록하려면 어떻게해야합니까? 왜냐하면 toggleOptions div를 표시하거나 숨기려면 링크를 사용하고 싶습니다. –

.toggleOptions 유효한 id DOM 속성 값이 아니다. 클래스 이름으로 요소를 가져 오려고합니까? 그런 다음 getElementsByClassName을 대신 사용하거나 리터럴에서 선행 점을 제거해야합니다.

출처

2012-12-05 19:41:32

목록에 div 표시/숨기기

답변

관련 문제