我在手风琴标题上添加了删除和编辑链接,但是这些链接不起作用,因为每次我单击它们时手风琴都打开。以及有关如何做的建议?请注意,我正在做嵌套手风琴。
这就是我在js上定义的方式:
$("#acc2").accordion({ alwaysOpen: false,active: false,autoheight: false,
header: 'h3.ui-accordion2-header',clearStyle: true,
event: 'click' });
在html上我是这样的:
<div class="ui-accordion2-group">
<h3 class="ui-accordion2-header">
<table border=0 width=100% class= 'DarkGray12' >
<tr>
<td>
<a href="javascript:toggel_new_activity('1');">Section Title</a>
</td>
<td align='right'>
<table border=0>
<tr>
<td>
<a href="javascript:toggel_new_activity('1');">New Activity</a>
</td>
<td>
<a href='#'>Edit</a>
</td>
<td>
<a href='#'>Delete</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</h3>
</div>
最佳答案
首先,摆脱h3中的那些表。将div与CSS结合使用:
<style>
.ui-accordion2-header .tools{
position: absolute;
right: 10px;
top: 10px;
width: 345px;
}
.ui-accordion2-header .tools a {
width: auto;
display: inline;
}
</style>
<div id="accordion" class="ui-accordion2-group">
<h3 class="ui-accordion2-header" data-sectionid="1">
<a href="#">Section Title</a>
<div class="tools">
<a href="#" class="newactivity">New Activity</a>
<a href="#" class="edit">Edit</a>
<a href="#" class="delete">Delete</a>
</div>
</h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</p>
</div>
</div>
其次,无需在顶部内联添加事件:
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
alwaysOpen: false,
active: false,
autoheight: false,
clearStyle: true
}).find('.tools a').click(function(ev){
ev.preventDefault();
ev.stopPropagation();
var $obj = $(this);
var sectionid = $obj.closest('h3').attr('data-sectionid');
if ($obj.hasClass('newactivity')){
toggel_new_activity(sectionid);
} else if ($obj.hasClass('edit')){
edit(sectionid);
} else if ($obj.hasClass('delete')){
delete(sectionid);
}
});
});
</script>
ev.preventDefault()防止您单击“ a”标记时发生的正常情况。
ev.stopPropaggation()防止click事件到达相应的位置并切换该部分的状态
其余的只是找出当前部分的ID,然后根据所单击的链接进行正确的函数调用。
关于jquery - javascript-如何使仅特定文本可点击在 Accordion 标题上-jQuery?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/1708238/