Jquery Accordion: установить действие для определенного элемента внутри заголовка

по умолчанию, если у нас есть что-то подобное в качестве заголовка в jQuery Accordion:

<h3>
    <div class="1">TEXT</div>
    <div class="2">ICON</div>
    <div class="3">BUTTON</div>
</h3>

щелкнув в любом месте на этом, аккордеон работает и переключает следующий элемент и ...

вопрос в том, как мы можем установить параметр и выбрать определенный элемент (например: «div» с классом «1»), чтобы щелкнуть по нему и переключить аккордеон.

я имею в виду, что я не хочу, чтобы весь заголовок оставался доступным для щелчка. я просто хочу щелкнуть значок или элемент div внутри заголовка и переключить открытие/закрытие аккордеона.

Спасибо

Обновление 1:

HTML:

<div id="testAcc">

    <h3>
        <div class="one">Text</div>
        <div class="two">Icon</div>
        <div class="three">Button</div>
    </h3>
    <div class="accBody">
        text text text text text text text text text text 
    </div>

    <h3>
        <div class="one">Text</div>
        <div class="two">Icon</div>
        <div class="three">Button</div>
    </h3>
    <div class="accBody">
        text text text text text text text text text text 
    </div>

</div>

JS :

$('#testAcc').accordion({
        autoHeight: false,
        header: 'h3',
        collapsible: 'ture',
});

эти коды работают нормально. но я хочу использовать что-то вроде (header: 'h3>.one') означает, что я хочу установить определенный класс и элемент внутри заголовка, тогда, если пользователь нажмет ТОЛЬКО на этот элемент, аккордеон откроется или закроется...


person J.Tay    schedule 17.05.2010    source источник
comment
покажите нам javascript, чтобы мы могли видеть, что вы делаете...   -  person Gabriele Petrioli    schedule 17.05.2010
comment
Добавлены html и js. Спасибо.   -  person J.Tay    schedule 17.05.2010


Ответы (1)


Вы можете return false с помощью обработчика кликов на элементах, для которых не нужен эффект переключения аккордеона, например:

$('#testAcc').accordion({
  autoHeight: false,
  header: 'h3',
  collapsible: true
});
$("#testAcc .two, #testAcc .three").click(function() {
  return false;
});
​

Вы можете увидеть рабочую демонстрацию здесь

person Nick Craver    schedule 18.05.2010
comment
спасибо за Ваш ответ. но если класс .one , .two и .three имеет FLOAT , то в H3 остается пустое место. вот так: H3 : ‹|--один--||--два--||--три--| › если пользователь нажмет на это пустое место, аккордеон закроется/откроется. - person J.Tay; 18.05.2010
comment
@J.Tay - Это все CSS :) Если вы дадите .one границу, вы увидите, что она занимает все это пространство, если вы этого не хотите, вам нужно изменить стиль, плавающий или что-то в этом роде... Сторона jQuery верна, вы действительно нажимаете на .one, какая у нее ширина, вам нужно решить :) - person Nick Craver; 18.05.2010