如何使手风琴标题上仅可单击特定文本 - jquery？

Question

我向手风琴标题添加了删除和编辑链接，但这些链接不起作用，因为每次我单击它们时手风琴都会打开。以及关于我该如何做的建议？请注意，我正在做嵌套手风琴。 这就是我在 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>

Answer 1

首先，删除 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() 阻止点击事件到达相应的位置并切换该部分的状态。

剩下的只是找出当前部分的 id，并根据单击的链接进行正确的函数调用。