두 번 클릭하면 링크가 전환됩니다.

Question

내 자바 스크립트이며 동일한 링크를 두 번 클릭하면 토글됩니다. 어떻게하면 그런 일이 일어나지 않도록 할 수 있습니까? 궁극적으로 나는 클릭 한 항목을 기반으로 psection을 보여주고 싶지만 두 번 클릭하면 토글됩니다.

current = "intersitial"; // div with id="m0" is currently diplayed 
function show_or_hide (id) 
{ 
    if (current) //if something is displayed 
    { 
     document.getElementById (current).style.display = "none"; 
     if (current == id) //if <div> is already diplayed 
     {       
      current = 0; 
     } 
     else 
     { 
      document.getElementById (id).style.display = "block"; 
      current = id; 
     } 
    } 
    else //if nothing is displayed 
    { 
     document.getElementById (id).style.display = "block"; 
     current = id; 
    } 
} 

내 HTML은 다음과 같습니다

<ul> 
    <li onclick="show_or_hide('intersitial')"><span>intersitial</span></li> 
    <li onclick="show_or_hide('advancedDetail')"><span>advancedDetail</span></li> 
    <li onclick="show_or_hide('ultimateDetail')"><span>ultimateDetail</span></li> 
</ul> 

<div class="megamenu" id="intersitial">intersitial</div> 
<div class="megamenu" id="advancedDetail" style="display: none">advancedDetail</div> 
<div class="megamenu" id="ultimateDetail" style="display: none">ultimateDetail</div> 

Answer 1

내가 (인라인 이벤트 핸들러, onclick, onfocus, 등등 onblur 및 사용) 돌출 자바 스크립트에서 변경 좋을 것

하고, 대신 JavaScript를 사용하여 이벤트 바인딩 :

// use a function-name that's descriptive of what it does: 
function showOnly() { 
    // or you could use `document.getElementsByClassName('megamenu'): 
    var divs = document.querySelectorAll('div.megamenu'), 
     // gets the text from the 'span' of the clicked 'li' (the 'id' for later): 
     id = this.firstChild.textContent; 
    // iterates over each of the found '.megamenu' elements: 
    for (var i = 0, len = divs.length; i < len; i++){ 
     /* if the id of the current 'div' is the same as the text in the 'span' 
      display = block, otherwise display = none: 
     */ 
     divs[i].style.display = divs[i].id === id ? 'block' : 'none'; 
    } 
} 

// get the 'li' elements: 
var lis = document.querySelectorAll('li'); 

// iterate over those elements and bind an event-handler to them: 
for (var i = 0, len = lis.length; i < len; i++) { 
    lis[i].addEventListener('click', showOnly); 
} 

JS Fiddle demo.

이 접근법은 전역 네임 스페이스에 변수가 포함되는 것을 피합니다 (여러 개발자가 같은 프로젝트에서 작업 할 때 특히 (배타적이지는 않음)).

참고 :

• Element.addEventListener().
• document.querySelectorAll().
• Node.firstChild.
• Node.textContent.

Answer 2

function show_or_hide(id) 
{ 
    if (current == id) return; 
    if (current) // if something is displayed 
    { 
     document.getElementById (current).style.display = "none"; 
    } 
    document.getElementById (id).style.display = "block"; 
    current = id; 
}