jQuery 工具:如何打开/关闭手风琴部分? [英] jQuery Tools: How to open/close accordion section?

问题描述

这是我的问题.

我使用 jQuery 工具构建了一个功能完美的手风琴.非常容易使用.

I built a perfectly functioning accordion using jQuery Tools. Very easy to work with.

客户回来说，现在手风琴必须是可折叠的，这不在原始规范中.不幸的是，jQuery Tools 手风琴没有内置此功能，所以我一直在编写自己的代码.

Client comes back and says that now accordions must be collapsible, which wasn't in the original spec. Unfortunately, jQuery Tools accordion does not have this functionality built in, so I've been working on my own code.

我已经接近了，但没有 100% 有效.我在这里创建了我的代码的 JSFiddle:http://jsfiddle.net/4ubZs/15/

I've gotten close, but nothing 100% works. I've created a JSFiddle of my code here: http://jsfiddle.net/4ubZs/15/

折叠代码工作正常.

// Code to collapse accordions
$("#accordion > h2").click(function(){
if (this.className == "current") {
    $(this).removeClass("current");
    $(this).next("div").slideToggle("slow");
} else {

问题在于重新开放.我尝试了 2 种不同的解决方案来重新打开.第一个代码块尝试使用工具 API.它不会重新打开最近关闭的选项卡，但如果我在 .click() 调用中用实际索引号替换current_tab"会起作用，但如果我尝试以编程方式获取索引则不会.

It is the reopening that is a problem. I've attempted 2 different solutions to reopen. The first block of code is attempting to use the Tools API. It will not re-open the recently closed tab, but will work if I replace "current_tab" with an actual index number in the .click() call, but not if I try to get the index programatically.

var api = $("#accordion").data("tabs");
var current_tab = api.getIndex(this);
api.click(current_tab);

第二个块试图绕过 jQuery 工具 API，并且有效，但是我在打开时得到了双重动画，我假设这与 jQuery 工具功能冲突.

The second block attempts to circumvent the jQuery Tools API, and works, however I get a double animation when opening, which I'm assuming is a conflict with the jQuery Tools functionality.

$(this).parent().children("h2").removeClass("current");
$(this).parent().children("div").slideUp("slow");
$(this).toggleClass("current");
$(this).next("div").slideToggle("slow");

如果有人能指出我做错了什么，那将是一个巨大的帮助.

If anyone can point out what I'm doing wrong it would be a HUGE help.

谢谢！

多考虑一下，第一块重新打开"代码不起作用是有道理的.因为我只是从打开的手风琴中删除类，所以我实际上并没有告诉 jQuery Tools 它已经关闭.因此，当我单击它重新打开它时，据 jQuery Tools 所知，该手风琴 已经 打开并且不需要再次打开.我想我需要想办法告诉 jQuery Tools 手风琴已关闭并且该代码将起作用.

Thinking about this more, the first block of "reopen" code not working makes sense. Because I'm just removing classes from the open accordion, I'm not actually telling jQuery Tools that it has been closed. So when I click on it to reopen it, as far as jQuery Tools knows, that accordion is already open and doesn't need to open again. I guess I need to figure a way to tell jQuery Tools that the accordion is closed and that code will work.

推荐答案

在我搜索重新单击时关闭 jQuerytools 选项卡"的过程中，我一直找到这篇帖子.jQuerytools 已经更新了它的核心代码，尽管上面的代码适用于以前的版本，但我已经编写了一个名为closeOnClick"的新传递来匹配 jQuery UI 的风格.

In my searches for "close jQuerytools tabs on re-click" I kept finding this posting. jQuerytools has updated its core code and even though the above code would work for the previous versions I have written a new pass in called "closeOnClick" to match the style of jQuery UI.

        $el.tabs(
        ".envs div.panes",
        {
            tabs: "h3",
            effect: 'slide',
            collapse: false,
            closeOnClick: true,
            initialIndex: null
        }
    );

https://jsfiddle.net/googabeast/co8nxm8y/

Tabs.js 代码直接从 jQuerytools 的 github 上拉取

The Tabs.js code was pulled directly from the github of jQuerytools

这篇关于jQuery 工具:如何打开/关闭手风琴部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！