2014-12-19 50 views
4

我有一個完美的Bootstrap手風琴表。基本上,如果有人點擊某行,它會顯示更多內容。現在,問題是其中一行包含一個按鈕鏈接,當有人單擊該按鈕時,它會正確轉到該鏈接,但它也會打開隱藏的行內容。Bootstrap手風琴表內的鏈接按鈕

我該如何做到這一點,以便當有人點擊按鈕,它也不會打開隱藏的行,並只去鏈接?

<table class="table"> 

<thead> 

<th width="20%" class="">Row 1</th> 
<th width="20%" class="">Row 2</th> 
<th width="20%" class="">Row 3</th> 
<th width="20%" class="">Row 4</th> 
<th width="20%" class="">Row 5</th> 

</thead> 

<tbody> 

<tr data-toggle="collapse" data-target="#123" class="accordion-toggle"> 

<td class="">Content 1</td> 
<td class="">Content 2</td> 
<td class="">Content 3</td> 
<td class="">Content 4</td> 
<td class=""><a href="http://www.url.com/" type="button" class="btn btn-primary">Link</a></td> 
</tr><tr> 
<td colspan="5" class="hiddenRow"><div class="accordian-body collapse" id="123">More Content</div> </td> 
</tr> 

</tbody> 

</table> 

回答

5

嘗試是這樣的: -

<a href="http://www.url.com/" onclick= stopEventPropogation(event) type="button" class="btn btn-primary">Link</a> 

<script type="text/javascript"> 
function stopEventPropogation(e){ 
e.stopPropogation() 
} 
</script> 

或由Bart的建議,這也可用於: -

$('.accordion-toggole').on('click', '.btn', function(e) { e.stopPropagation(); }) 
+0

你也可以做unobstrusive'$(」手風琴。 ('click','.btn',function(e){e.stopPropagation();})'將它添加到你的答案中,如果你覺得它的話。 – 2014-12-19 06:26:01

+0

謝謝你,完美的工作! – user1227914 2014-12-19 13:47:49