Bind <td> (앵커가 포함되어 있지 않음, jQuery 사용)

Question

업데이트 : 링크가 작동하지만 화살표는 여전히 문제가 있습니다. 당신이 행을 클릭하면 내가지도 아래 http://www.boulderdispensaries.com/

에서 일하고 있어요

는

, 당신은 그 아래 행이 표시를 참조하십시오. 행의 링크를 클릭하는 경우에도 마찬가지입니다. 또한 행을 클릭 한 다음 위의 행을 클릭하면 오른쪽 화살표가 거절되지 않습니다. 행을 클릭하면 링크로 이동하고 화살표가 제대로 작동하도록 어떻게 수정할 수 있습니까? 바이올리니스트를 들어

: 나는 또한 아래의 코드를 붙여 넣은 http://jsfiddle.net/yFkNf/

.

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

}); 

여기에 매 2 행의 형식의 다음 TD까지 버블 링에서 TD 내부 앵커 링크 클릭을 방지 할 수

<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:info@boulderkindcare.com"><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> 

Answer 1

:

는 링크가 제대로 작동하게하려면, 당신은 당신의 클릭 핸들러에서 return false를 제거해야합니다 생각합니다. 그 라인은 명시 적으로 링크가 작동하지 않는다고 말하는 것 같습니다.

화살표가있는 문제는 상태 변수 is_visible이 전역이므로 (모든 btw를 피해야 함) 모든 행이 동일한 변수를 공유합니다. 그 상태를 tr의 클래스에 저장 한 다음 onClick을 확인하는 것이 좋습니다. 아니면 더 나은 아직 그 클래스를 기반으로 '표시됩니다'행에 대한 다른 처리기가 있습니다.

Answer 2

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

. 선택기를 좀 덜 일반화하기를 원할 것입니다. 당신은 나를 정확하게 목표로 삼을만한 충분한 정보를주지 못했습니다.

화살표

당신은 항목을 확장할지 여부를 저장하는 전역 변수를 사용하고 있지만, 여러 항목을 한 번에 확장 할 수 있습니다. 본질적으로 토글 링크에이 세부 정보를 저장하거나 확장되는 행 상태를 알기 위해 해당 컨텍스트 내에서 다른 방법을 찾아야합니다. 코드없는 응답 죄송합니다