Javascriptトグルdivsの問題

Question

私は確かに単純ですが、私はそれを理解することができないこの問題があります。私はボタンを押してdiv要素を切り替えるJavaScriptの機能を持っている：

の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はありません。