【问题标题】:How to close all other accordions in multiple sections when I open one?当我打开一个手风琴时,如何关闭多个部分中的所有其他手风琴?
【发布时间】:2014-04-02 12:00:23
【问题描述】:

编辑:我找到了不使用 jQuery UI 手风琴的解决方案: Jquery toggle (Click to show one div while hiding others)

JSFiddle:http://jsfiddle.net/sy34v/(不要介意左边有空格,可能是因为禁用了列表编号)

如果我打开一个手风琴,让我们说“列表窗口 1”,即使我点击“列表窗口 2”中的另一个手风琴,它也会保持打开状态。

因此,如果我有 4 个手风琴部分,则可以打开 4 个手风琴。如何使整个页面上只能打开一个手风琴,如果我打开另一个手风琴,那么最后一个会关闭?它只在手风琴部分这样工作。

这里是 jQuery:

$(document).ready(function () {
    $(".listWindow").accordion({
        header: ".accordionHeader",
        collapsible: true,
        active: false
    });
});

【问题讨论】:

标签: javascript jquery css jquery-ui


【解决方案1】:

试试这个解决方案

http://jsfiddle.net/rm7fD/

$(document).ready(function () {
var titleClicked = "";

$(".listWindow").accordion({
    header: ".accordionHeader",
    collapsible: true,
    active: false,
    activate: function( event, ui ) {
        var title = $(this).find(".title").html(); 
        setTimeout(function(){
            if(titleClicked == title){
                $(".listWindow").each(function(){
                    if ($(this).find(".title").html() != title){                       
                        $(this).accordion("option", "active", false);
                    }
                });
           }
        }, 100);
    }
});  

$(".siteTitle").click(function () {
    event.stopPropagation();        
});

$(".accordionWrapper").click(function(){        
    titleClicked = $(this).closest(".listWindow").find(".title").text();
});

});

【讨论】:

  • 它可以工作,但有点不稳定,因为当我快速点击时它会出错,但感谢您的帮助
  • 再试一次,我修改了没有定时器
  • 编辑过的小提琴有时也会立即关闭打开的手风琴
【解决方案2】:

你试过这种方法吗?

$(function() {
    var $accordions = $(".listWindow").accordion({
        header: ".accordionHeader",
        collapsible: true,
        active: false
    }).on('click', function() {
        $accordions.not(this).accordion('activate', false);
    });
});

基于:Close accordions if other accordian is open in jquery

【讨论】:

  • 是的,但它不适用于 jQuery 1.11.0 和 jQuery UI 1.10.4
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-10-20
  • 1970-01-01
  • 2017-10-26
  • 1970-01-01
  • 1970-01-01
  • 2022-11-19
相关资源
最近更新 更多