javascript - Javascript 切换 div 的问题

Question

我有这个问题，我确信很简单，但我似乎无法弄清楚。我有一个 javascript 函数可以通过按下按钮来切换 div:

JavaScript:

<script type="text/javascript" charset="utf-8">
//jquery functionality for toggling member interaction containers
function toggleInteractContainers(x)
{
    if($('#'+x).is(":hidden"))
    {
        $('#'+x).slideDown(200);
    }else
    {
        $('#'+x).hide();
    }
    $('.interactContainers').hide();
}
//function for adding friends...receives two arguments
function addAsPal(a,b)
{
    //alert("Member with ID:" +a+ "is requesting to be pals with member with ID:" +b);
    var url = "request_as_pal.php";
    var thisRandNum = "<?php echo $thisRandNum; ?>";
    $("#add_pal").text("please wait...").show();
    $.post(url,{request:"requestPal", mem1:a, mem2:b, thisWipit: thisRandNum}, function(data){
    $("#add_pal").html(data).show().fadeOut(12000);
    });
}
</script>

我的html代码是(只是其中的一部分，因为它太长了):

<tr>
    <td height="40" class="ordinary_text_12_blue" align="center">Username:</td>
    <td class="ordinary_text_12"><?php echo $row_user_info ['username'];?></td>
    <td align="right" style="border:none;">
        <a href="#" onclick="return false"
           onmousedown="javascript:toggleInteractContainers('add_friend');">
         Add as Pal
        </a>
    </td>
</tr>
</table>
<div class="interactContainers" id="add_friend">                     
    <div align="right">
        <a class="ordinary_text_12" href="#" onclick="return false"
           onmousedown="javascript:toggleInteractContainers('add_pal');">
         Cancel&nbsp;
        </a>
    </div>
    <div>
        &nbsp; Add &nbsp;<?php echo "$firstname $lastname"; ?>&nbsp; as a Pal? &nbsp;
        <a class="ordinary_text_12" href="#" onclick="return false"
           onmousedown="javascript:addAsPal(<?php echo $user_id;?>,<?php echo $user_id2;?>);">
          Yes
        </a>
    </div>                          
</div> 

如果你注意到上面 html 代码的第 5 行，我有

onmousedown="javascript:toggleInteractContainers('add_friend');

这有效；将其更改为:

onmousedown="javascript:toggleInteractContainers('add_pal');

它不起作用。 有人可以帮我解决这个问题吗？谢谢。

CSS 代码是(如果需要):

.interactContainers
{
    margin-left:10px;
    position:relative;
    width:486px;    
    display:none;
    color: #09F;
    font-weight: bold;
    text-decoration: none;
    vertical-align:middle;
    font-size: 12px;    
    background-color:#222;
    border:#FFF 1px solid;  
}

.interactionLinksDiv a
{
    background-color:#222;
    display:inline;
    border:#FFF 1px solid;
    padding:7px;
    color:#9F3;
    font-size:12px;
    text-decoration:none;
}

Answer 1

请看一下这个jsfiddle

我删除了 onmousedown 并将其放入 onclick 事件中。还删除了

$('.interactContainers').hide();

请告诉我这是否是您正在寻找的内容。同样从您的代码中我们没有看到 id='add_pal' 的 div，因此没有要隐藏或显示的 add_pal div。