Javascript toggle div問題

我有這個問題，我敢肯定很簡單，但我似乎無法弄清楚。我有一個JavaScript功能通過按下一個按鈕來切換一個div：Javascript toggle 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');

This works;將其更改爲：

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

來源

2011-01-27 Kinyanjui Kamau

從你的代碼中，我們沒有看到id ='add_pal'的div，因此沒有add_pal來隱藏或顯示。 – kjy112 2011-01-27 16:25:48

創建一個jsFiddle示例，我們將調整您的無效代碼。因爲根據您提供的代碼，我們無法扣除它背後的接口過程。點擊時應該發生什麼？什麼應該顯示/隱藏... – 2011-01-27 16:38:24

請看一看這個jsfiddle

我刪除了onmousedown事件，並將其放置到onclick事件。也去掉了

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

讓我知道，如果這是你所期待的。也從你的代碼中，我們沒有看到id ='add_pal'的div，因此沒有add_pal div來隱藏或顯示。

來源

2011-01-27 16:41:36 kjy112

Javascript toggle div問題

回答

相關問題