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

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

0 голосов
/ 17 мая 2010

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

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

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

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

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

спасибо

Обновление 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') означает, что я хочу установить определенный класс и элемент внутри заголовка, а затем, если пользователь нажмет ТОЛЬКО на этом элементе, аккордеон будет открываться или закрываться ...

1 Ответ

0 голосов
/ 18 мая 2010

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

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

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

...