Jquery手風琴自定義點擊事件

我正在使用Jquery accordion手風琴。問題是，當用戶點擊加號或減號圖標時，我想要顯示和隱藏錐面板，但它在標題點擊時全部打開，並且toggles不能在標題部分的鉻和Safari瀏覽器中工作，並且在內容部分工作，任何幫助都應該啓用。？ enter image description here 代碼 -Jquery手風琴自定義點擊事件

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

來源

2013-10-09 Prince

檢查，也許你失去了一些東西。或者還有一些其他的jquery函數也與你的這個手風琴jquery相沖突。如果它是這樣的話，那麼使用noConflict（） – 2013-10-09 11:03:54

@wikijames每件事情都可以，它正在處理ie和Firefox，並且也沒有使用螢火蟲的js錯誤。 – Prince

這意味着現在，沒問題:)。多數民衆贊成 – 2013-10-09 11:06:00

要限制手風琴的打開/關閉僅限於圖標，您需要使用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; 
     } 
});

演示在http://jsfiddle.net/5Qfwc/

更新（用於切換後OP添加鏈接的jsfiddle）

對於滑塊，你必須在容器上的屬性align="right"div，這不是的有效屬性210個元素。

我只是改變了風格是float:right和去除餘量，並在所有的瀏覽器現在工作很好..

演示在http://jsfiddle.net/PKe5X/1/

來源

2013-10-09 11:29:00

謝謝限制手風琴的打開/關閉現在只能在鉻上切換，safari不能在標題部分工作。 – Prince

@Prince，我們將不得不看到它在某處runninig調試..其他明智我不能建議任何東西..不知道什麼切換插件做的HTML .. –

http://jsfiddle.net/princefiddle/PKe5X/ – Prince

Jquery手風琴自定義點擊事件

回答

相關問題