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

10-09 22:46