jquery ui手风琴避免关闭项目wnen点击另一个 [英] jquery ui accordion avoid closing item wnen clicking on another one

问题描述

从现有的小提琴开始，我创建了这个示例:http://jsfiddle.net/2DaR6/90/

这是html代码:

<h3 id="header1" class="accClicked"><a href="#">第 1 节</a></h3><div>早安 Stackoverflow</div><h3 id="header2" class="accClicked"><a href="#">Section 2</a></h3><div>Buongiorno Stackoverflow</div><h3 id="header3" class="accClicked"><a href="#">Section 3</a></h3><div>Bonjour Stackoverflow</div>

这是js代码:

$(function() {var 图标 = {标题:ui-icon-circle-arrow-e"，headerSelected: "ui-icon-circle-arrow-s"};$( "#accordion" ).accordion({图标:图标，可折叠:真实});$( "#header1" ).click(function() {$( "#accordion" ).accordion( "option", "icons", false );}， 功能() {$( "#accordion" ).accordion( "option", "icons", icons );});});

如果我点击第 1 部分，手风琴会正确打开，但我希望点击其他项目，以前打开的项目不会关闭.我怎样才能获得这种行为?谢谢

解决方案

您不应该将 jquery 手风琴用于这种目的.但是，覆盖任何元素事件行为相对容易.初始化手风琴时，您只需将点击处理程序覆盖到相应的元素即可.

在你的情况下，这给出了这样的东西:

$('#accordion .accClicked').off('点击').click(函数(){$(this).next().toggle('fast');});

参见工作 jsFiddle

starting from existing fiddle, I've created this sample: http://jsfiddle.net/2DaR6/90/

Here's the html code:

<div id="accordion">
  <h3 id="header1" class="accClicked"><a href="#">Section 1</a></h3>
    <div> Good Morning Stackoverflow</div>
  <h3 id="header2" class="accClicked"><a href="#">Section 2</a></h3>
    <div>Buongiorno Stackoverflow</div>
  <h3 id="header3" class="accClicked"><a href="#">Section 3</a></h3>
    <div>Bonjour Stackoverflow</div>
</div>

and here's the js code:

$(function() {
    var icons = {
        header: "ui-icon-circle-arrow-e",
        headerSelected: "ui-icon-circle-arrow-s"
    };
    $( "#accordion" ).accordion({
        icons: icons,
        collapsible: true
    });
    $( "#header1" ).click(function() {
        $( "#accordion" ).accordion( "option", "icons", false );
    }, function() {
        $( "#accordion" ).accordion( "option", "icons", icons );
    });
});​

If I click on Section 1, accordion correctly opens, but I want that clicking on other items, previously opened items won't close. How can I obtain this behaviour? Thanks

解决方案

You should not use jquery accordion for this kind of purpose. However, its relatively easy to override any element events behaviour. When accordion is initialized, you just have to override click handler to corresponding elements.

In your case, this giving something like this:

$('#accordion .accClicked')
        .off('click')
    .click(function(){
        $(this).next().toggle('fast');
    });​

See working jsFiddle

这篇关于jquery ui手风琴避免关闭项目wnen点击另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！