綁定，但不包含錨，使用jQuery

更新：鏈接現在可以工作，但箭頭仍然存在問題。綁定，但不包含錨，使用jQuery

我的工作http://www.boulderdispensaries.com/

下面的地圖，如果你點擊一排，你看它下面的一行出現。即使您單擊一行中的鏈接。另外，如果您單擊一行，然後單擊上面的行，右箭頭不會關閉。我該如何解決這個問題，點擊鏈接中的鏈接進入鏈接，箭頭功能正常？

我也粘貼下面的代碼。

的jQuery：

$(document).ready(function() { 

    var hideText='<img src="arrow-down.gif" width="10" height="10" border="0" alt="v">'; 
    var showText='<img src="arrow-right.gif" width="10" height="10" border="0" alt=">">'; 
    var is_visible = false; 

    $('tr:odd td').addClass('expand'); 
    // this is the hack I was using to get the links to work, but then the bind doesn't 
// $('tr:odd td:nth-child(1)').removeClass('expand'); 
// $('tr:odd td:nth-child(2)').removeClass('expand'); 
// $('tr:odd td:nth-child(4)').removeClass('expand'); 
    $('tr:odd td:first-child').prepend('<a href="#" class="toggleLink">'+showText+'</a> &nbsp;'); 

    $('.toggle').hide(); 

    $('a.toggleLink').click(function() { 
     is_visible = !is_visible; 
     $(this).html((!is_visible) ? showText : hideText); 
     $(this).parent().parent().next('tr').toggle(); 
     return false; 
    }); 

    $('.expand').click(function(){ 
     is_visible = !is_visible; 
     $(this).parent().find('a.toggleLink').html((!is_visible) ? showText : hideText); 
     $(this).parent().next('tr').toggle(); 
     return false; 
    }); 

});

這裏的每兩行的格式：

<tr> 
    <td><a href="http://www.boulderkindcare.org/">Boulder Kind Care</a></td> 
    <td><a href="http://maps.google.com/etc">2031 16th</a></td> 
    <td>(720) 235-4232</td> 
    <td><a href="mailto:[email protected]"><img src="email_icon.gif" /></a></td> 
    <td nowrap="nowrap">&nbsp;</td> 
    <td align="center">&nbsp;</td> 
    <td align="center">&nbsp;</td> 
    <td align="center">&nbsp;</td> 
</tr> 
<tr class="toggle"> 
    <td colspan="8">More info coming soon.</td> 
</tr>

來源

2011-10-06 Zade

對不起，無代碼響應：

要獲得鏈接正常工作，我相信你只是需要從您的單擊處理程序刪除return false。我認爲這條線明確地告訴鏈接不工作。

你對箭頭的問題是你的狀態變量is_visible是全局的（你應該避免btw），所以每一行都共享相同的變量。將該狀態存儲在tr的類中會更好，然後檢查onClick。或者也許更好，但基於該類的'可見'行具有不同的處理程序。

來源

2011-10-06 19:27:06

'return false'基本上意思是「不要做你以後通常會做的事情」。在鏈接的情況下，它會阻止瀏覽器跟隨該鏈接。但是，錶行或數據單元沒有默認的點擊行爲，所以'return false'基本上沒有意義。 –

對，我指的是他的a.toggleLink處理程序。 –

謝謝你們！我最終完全避免了is_visible。 – Zade

$('td a').click(function(event){ 
    event.stopPropagation(); 
});

這將阻止TD的內部錨鏈接點擊向上冒泡到TD。你可能會想讓選擇器不那麼普遍化;你沒有給我足夠的信息來專門針對它。

箭頭

您使用一個全局變量來存儲項目是否被擴大，但多個項目可以一次擴大。實質上，您需要將此詳細信息存儲在切換鏈接中，或者從該上下文中找到另一種方式來了解要擴展的行的狀態。

來源

2011-10-06 19:23:42

太棒了！謝謝。任何想法爲什麼箭仍然是時髦？ – Zade

綁定​​，但不包含錨，使用jQuery

回答

相關問題

綁定，但不包含錨，使用jQuery