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

问题描述

这是我的问题。

我使用jQuery Tools构建了功能完善的手风琴。

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种不同的解决方案来重新打开。第一段代码尝试使用Tools 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 Tools API，并且可以使用，但是打开时出现双重动画，我认为这与jQuery Tools功能冲突。

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屋！