는 하나가이 코드를 발견 토글

와 자바 스크립트 쇼 내용 한 번에 확장보기 :는 하나가이 코드를 발견 토글

<html> 
<head> 
    <script type="text/javascript" charset="utf-8"> 
    function showHide(elementid){ 
    if (document.getElementById(elementid).style.display == 'none'){ 
     document.getElementById(elementid).style.display = ''; 
    } else { 
     document.getElementById(elementid).style.display = 'none'; 
    } 
    } 
    </script> 
</head> 
<body> 
    <div><a href="javascript:showHide('div_1035677');">more...</a></div> 
    <div id="div_1035677" style="display:none"> 
    HIDDEN CONTENT 
    </div> 
    <div><a href="javascript:showHide('div_1035678');">more...</a></div> 
    <div id="div_1035678" style="display:none"> 
    HIDDEN CONTENT 
    </div>

지금은 확장 된 모든 내용을 가지고 내 웹 사이트를 사용하는 사람들이 있습니다. 나는 한 번에 하나씩 만 허용하고 싶다. 그래서 그들은 다른 하나를 클릭하면 자동으로 다른 모든 것들을 닫습니다. 당신은 어떻게 순수한 js에서 이것을 할 수 있습니까?

출처

2013-10-26 user2921945

당신이 달성하려고 시도하거나 무엇을하려고하는지 명확하지 않다 – iJade

왜 코드를 실행하지 않습니까? 동시에 여러 항목을 확장 할 수 있습니다. 한 번에 한 명씩 만 확장하면됩니다. – user2921945

hiders 또는 무언가와 showHide() 함수에 자동으로 닫으려는 div를 모두 넣기 전에 클래스의 모든 구성원을 보이지 않게 할 수 있습니다. 이와 같이 :

function showHide(elementid){ 

    var hiders = document.getElementsByClassName("hiders"); 
     for(var i =0;i<hiders.length;i++){ 
     hiders[i].style.display = "none"; 
     } 

    if (document.getElementById(elementid).style.display == 'none'){ 
     document.getElementById(elementid).style.display = ''; 
    } else { 
     document.getElementById(elementid).style.display = 'none'; 
    } 
} 

<div><a href="javascript:showHide('div_1035677');">more...</a></div> 
<div class="hiders" id="div_1035677" style="display:none"> 
    HIDDEN CONTENT 
</div> 
<div><a href="javascript:showHide('div_1035678');">more...</a></div> 
<div class="hiders" id="div_1035678" style="display:none"> 
    HIDDEN CONTENT 
</div>

출처

2013-10-26 20:58:42 frasertmay

는 하나가이 코드를 발견 토글

답변

관련 문제