JQuery аккордеон настроить клик событие

Question

Я использую Jquery accordion для аккордеона. проблема в том, что я хочу показать и скрыть панель консоли, когда пользователь нажимает на значок «плюс» или «минус», но он вскрывает все по щелчку заголовка, а также toggles не работают в хромированном и сафари в разделе заголовка и работают над секцией контента. Любая помощь должна быть обработана , ? код-

<?php 
$cs=Yii::app()->clientScript; 
$cs->registerScriptFile(Yii::app()->baseUrl . '/js/jquery.min.js', CClientScript::POS_HEAD); 
$cs->registerScriptFile('http://code.jquery.com/ui/1.10.3/jquery-ui.js', CClientScript::POS_HEAD); 
$cs->registerScriptFile(Yii::app()->baseUrl . '/js/toggles.min.js', CClientScript::POS_HEAD); 
$cs->registerCssFile('http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css'); 
$cs->registerCssFile(Yii::app()->baseUrl . '/css/themes/toggles-light.css'); 
$cs->registerCssFile(Yii::app()->baseUrl . '/css/toggles.css'); 

>

css-

<style> 
.ui-accordion-header { 
    background:none; 
} 
.ui-accordion-content { 
    background:none; 
} 
.iconOpen { 
    background:url('<?php echo Yii::app()->request->baseUrl; ?>/img/minus.png') no-repeat !important; 
    background-size:46px !important; 
    width:46px; 
    height:44px; 
} 
.iconClosed { 
    background:url('<?php echo Yii::app()->request->baseUrl; ?>/img/plus.png') no-repeat !important; 
    background-size:46px !important; 
    width:46px; 
    height:44px; 
} 
.ui-accordion .ui-accordion-header .ui-accordion-header-icon { 
    top: 25%; 
    left: 0.0em; 
    margin-top: -12px; 
} 
.ui-accordion .ui-accordion-icons { 
    padding-left: 4.2em; 
} 
.ui-accordion .ui-accordion-header { 
    margin-top: 0px; 
    height: 26px !important; 
} 
</style> 

js-

<script> 
$(function() { 
var icons = { 
     header: "iconClosed", // custom icon class 
     activeHeader: "iconOpen" // custom icon class 
    }; 
$("#main_accordion").accordion({ 
icons: icons, 
collapsible: true, 
heightStyle: "content" 
}); 
$('.toggle').toggles({clicker:$('.clickme')}); 

}); 
</script> 

Html: -

<div id="main_accordion"> 
    <h3>R 
     <div align="right" style=" margin-top: -16px;"> 
     <div class="toggle-light"> 
      <div class="toggle"></div> 
     </div> 
     </div> 
    </h3> 
    <div> 
     <p>interface</p> 
    </div> 
    <h3>F 
     <div align="right" style=" margin-top: -16px;"> 
     <div class="toggle-light"> 
      <div class="toggle"></div> 
     </div> 
     </div> 
    </h3> 
    <div> 
     <p> Feed Back 
     <div class="toggle-light"> 
     <div class="toggle"></div> 
     </div> 
     </p> 
    </div> 
    </div> 

Answer 1

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

$("#main_accordion").accordion({ 
    icons: icons, 
    collapsible: true, 
    heightStyle: "content", 
    beforeActivate:function(event, ui){ 
      var fromIcon = $(event.originalEvent.target).is('.ui-accordion-header > .ui-icon'); 
      return fromIcon; 
     } 
}); 

Demo вhttp://jsfiddle.net/5Qfwc/

---

Update (для тумблеров после OP добавлена ​​ссылка на jsfiddle)

Для слайдеров, у вас есть атрибут align="right" на контейнере div, что является недопустимым атрибутом для div элементов.

Я просто изменил стиль, чтобы быть float:right и удален запас, и теперь он отлично работает на всех браузерах ..

Demo вhttp://jsfiddle.net/PKe5X/1/