Как сделать только определенный текст кликабельным в заголовке гармошки - jquery? - PullRequest
Новая
       24

Как сделать только определенный текст кликабельным в заголовке гармошки - jquery?

3 голосов
/ 10 ноября 2009

Я добавил ссылку на удаление и редактирование в заголовок аккордеона, но эти ссылки не работают, так как каждый раз, когда я нажимаю на них, открывается аккордеон. И совет, как мне это сделать? Обратите внимание, что я делаю вложенный аккордеон. Вот как я определил это на 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>

1 Ответ

8 голосов
/ 11 ноября 2009

Во-первых, избавьтесь от этих таблиц в 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 в соответствующий и переключающий статус раздела

Остальные просто вычисляют идентификатор текущего раздела и делают правильный вызов функции в зависимости от того, какая ссылка была нажата.

...