переключается только при двойном щелчке

Question

Когда я нажимаю на свои ссылки, используя событие onmousedown, мне нужно дважды щелкнуть по ним, чтобы они переключались. Я не понимаю, почему это так.

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(); 
} 

Я звоню его из этого Div

<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> 

Я не получаю никаких ошибок, которые расстраивают. Я был бы очень признателен, если бы мне сказали, почему это произошло, и что я могу сделать, чтобы это не повторилось. Любые советы по программированию на этом пути также были бы замечательными.

Answer 1

Рабочие демо Незначительные изменения сделано: http://jsfiddle.net/FGqE7/

Пожалуйста дайте мне знать, если я пропустил что-нибудь!

Надеется, что это соответствует делу :)

Код

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>​ 

Javascript:

$(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://api.jquery.com/slideToggle/