Jquery手风琴自定义点击事件

Question

Jquery手风琴自定义点击事件

3

我正在使用Jquery手风琴来制作手风琴。问题是当用户点击加号或减号图标时，我想显示和隐藏内容面板，但它会在头部点击时全部打开，并且切换在Chrome和Safari的头部部分无法工作，在内容部分可以工作。任何帮助将不胜感激。 < img alt="输入图像描述" src="https://istack.dev59.com/wzLtL.webp"/> 代码-

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

- Prince

@wikijames 一切都正常，它可以在IE和Firefox上运行，并且使用Firebug没有JS错误。 - Prince

这意味着现在没问题 :)。那很好。 - user2021917

@wikijames 在Chrome和Safari上出现问题，同时仅限于图标而不是整个标题部分的点击事件。 - Prince

请提供一个可用的jsfiddle。 - Gabriele Petrioli

谢谢你，应该确保发布一个可工作的fiddle。只有这样才能找出你遇到的问题。 - user2021917

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriele Petrioli · Accepted Answer

为了限制手风琴面板只能通过图标来打开/关闭，您需要使用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/

更新 (针对楼主添加了jsfiddle链接后的切换操作)

对于滑块，您在容器

上有一个属性align="right"，但这不是

元素的有效属性。

我只是将样式更改为float:right并删除了边距，现在在所有浏览器上都可以正常使用了。

演示请见 http://jsfiddle.net/PKe5X/1/