1

当我使用 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>

我没有收到任何令人沮丧的错误。如果有人告诉我为什么会发生这种情况以及我能做些什么来防止它再次发生，我将不胜感激。一路上的任何编程技巧都会很棒。

4

2 回答 2

1

我尝试在 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/

于 2012-10-21T03:15:57.500 回答
0

工作演示完成的小改动：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();
}​
于 2012-10-21T03:23:29.543 回答