토글은 두 번 클릭했을 때만 작동합니다.

Question

onmousedown 이벤트를 사용하여 링크를 클릭하면 두 번 클릭하여 전환 할 수 있습니다. 나는 이것이 왜 그렇게 중요한지 이해하지 못하고있다. 이것이 내가 실망 오류를받지 못했습니다

<div class ="interactionLinksDiv"> 
      <a href="#" onclick="return false" onmousedown="toggleInteractContainers('add_friend');">Add Contact</a> 
</div>   
<div class ="interactContainers" id ="add_friend"> 
    <div align ="right"><a href="#" onclick= "return false" onmousedown = "toggleInteractContainers('add_friend')">cancel</a></div> 
       Add as a contact? &nbsp; 
    <a href ="#" onclick="return false" onmousedown="javascript:addAsFriend(); ">Yes</a> 
</div> 

를 div에에서

function toggleInteractContainers(x) { 
//the 'x' variable represents the add friend/message container value 
     if($('#'+x).is(":hidden")) { 
     //if the container is hidden then we will slide it down and show it 
      $('#'+x).slideToggle(400); 

     } else { 
      //if its not being hidden then we will hide it 
      $('#'+x).hide(); 
     } 
     //this just means we have to hide all the containers 
     $('.interactContainers').hide(); 
} 

는 내가 전화 드렸습니다. 왜 이런 일이 일어 났으며 내가 다시 일어나는 것을 막기 위해 할 수있는 일을 말하면 크게 감사 할 것입니다. 길을 따라가는 프로그래밍 팁도 훌륭합니다.

Answer 1

근무 데모 사소한 변경이 완료 (그것을 토글 숨겨진 있다면 ---이 숨겨져 대신하는 경우, 그것은보기) 내가 무엇이든 놓친다면 알려줘!

는 :)

코드

function toggleInteractContainers(x) { 
    //the 'x' variable represents the add friend/message container value 
    if (!$('#' + x).is(":visible")) { 
     //if the container is hidden then we will slide it down and show it 
     $('#' + x).slideDown(400); 

    } else { 
     //if its not being hidden then we will hide it 
     $('#' + x).hide(); 
    } 
    //this just means we have to hide all the containers 
    // $('.interactContainers').hide(); 
}​ 

Answer 2

jsFiddle에서 다시 시도해 보았습니다. 세부 사항이 없기 때문에 조금 복잡합니다.

HTML :

<div class ="interactionLinksDiv"> 
    <a href="#" class="toggleInteractContainers" data-target="add_friend">Add Contact</a> 
</div>   
<div class ="interactContainers" id ="add_friend"> 
    <div align ="right"> 
     <a href="#" class="toggleInteractContainers" data-target="add_friend">cancel</a></div> 
    Add as a contact? &nbsp; 
    <a href ="#" class="addAsFriend">Yes</a> 
</div>​ 

자바 스크립트 :

$(function() { 

    $(document).on("click", ".toggleInteractContainers", function() { 
     target_id = $(this).data("target"); 
     $('#' + target_id).slideToggle(400); 
    }); 


    $(document).on("click", ".addAsFriend", function() { 
     // Do something here when someone clicks on Yes 
    }); 

});​ 

http://jsfiddle.net/Kj4rK/

기본적으로, 여기에 몇 가지주의 사항입니다.

• jQuery를 사용 중이므로 DOM에서 직접 이벤트를 사용하면 안됩니다 (onmouseclick = ""태그 안 사용). jQuery에 포함 된 적절한 바인딩 및/또는 위임 함수를 사용해야합니다. http://api.jquery.com/on/

• .toggle() 및 .slideToggle()은 항상 상태의 반대를 수행합니다. 숨겨진 경우 표시되고 표시되면 숨길 것입니다. http://jsfiddle.net/FGqE7/

  사항 :이 조건문을했기 때문에 귀하의 코드가 작동하지 않았다 http://api.jquery.com/slideToggle/