How to make only specific text clickable on accordion header - jquery?

问题

I added delete and edit link to the accordion header, yet those links are not working since every time i click on them the accordion open. And advice on how can I do it? Note that I'm doing nested accordion. this is how i defined it on js:

$("#acc2").accordion({  alwaysOpen: false,active: false,autoheight: false,
            header: 'h3.ui-accordion2-header',clearStyle: true,
             event: 'click' });

and on html I have it like this:

<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>

回答1:

First thing, get rid of those tables in the h3's. Use divs with 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>

Second, No need to add events inline do it up at the top:

<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() prevents the normal things that happen when you click an "a" tag from happening. ev.stopPropaggation() prevents the click event from getting to the according and toggling the status of the section

The rest just figures out the id for the current section and makes the correct function call based on what link was clicked.

来源：https://stackoverflow.com/questions/1708238/how-to-make-only-specific-text-clickable-on-accordion-header-jquery

标签

jquery

header

accordion