如何只在手风琴标题上点击特定的文字 – jquery？

我添加了删除和编辑手风琴标题的链接,但这些链接不起作用,因为每次我点击它们手风琴打开.并建议如何做到这一点？请注意,我正在做嵌套式手风琴.
这是我在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,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,并根据点击的链接进行正确的函数调用.

原文地址：https://www.jb51.cc/jquery/181367.html