Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何扩展jQuery accordion插件

如何扩展jQuery accordion插件
EN

Stack Overflow用户
提问于 2012-12-07 18:51:42
回答 4查看 1.1K关注 0票数 10

如何扩展jQuery插件?

目前我使用的是multiopen accordion插件。

我需要添加新的功能,比如一旦展开/折叠完成,我需要回调一个函数,就像jquery ui accordion插件中的change事件一样。

如何在此插件中添加此功能。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-12-20 03:39:14

代码语言:javascript
运行
AI代码解释
复制
$.extend($.ui.multiAccordion, {    
    // private helper method that used to show tabs
    _showTab: function($this) {
        var $span = $this.children('span.ui-icon');
        var $div = $this.next();
        var options = this.options;
        $this.removeClass('ui-state-default ui-corner-all').addClass('ui-state-active ui-corner-top');
        $span.removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
        // MODIIFICATION
        bindThis = this;
        var ui = {
            tab: $this,
            content: $this.next('div')
        }
        $div.slideDown('fast', function(){
            $div.addClass(options._classes.divActive);
            // MODIFICATION
            bindThis._trigger('tabShownComplete');
        });
        this._trigger('tabShown', null, ui);
    },

    // private helper method that used to show tabs 
    _hideTab: function($this) {
        var $span = $this.children('span.ui-icon');
        var $div = $this.next();
        var options = this.options;
        $this.removeClass('ui-state-active ui-corner-top').addClass('ui-state-default ui-corner-all');
        $span.removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        // MODIIFICATION
        bindThis = this;
        var ui = {
            tab: $this,
            content: $this.next('div')
        }
        $div.slideUp('fast', function(){
            $div.removeClass(options._classes.divActive);
            // MODIFICATION
            bindThis._trigger('tabHiddenComplete', null, ui);
        });
        this._trigger('tabHidden', null, ui);
    }
});

票数 2
EN

Stack Overflow用户

发布于 2012-12-17 21:43:02

为此,您不需要accordion小部件。只需几行jQuery就可以做到这一点。

html:

代码语言:javascript
运行
AI代码解释
复制
<h3 class="header"> Title 1 </h3>
<div class="content"> Content 1 </div>
<h3 class="header"> Title 2 </h3>
<div class="content"> Content 2 </div>

javascrpt/jQuery:

代码语言:javascript
运行
AI代码解释
复制
( function( $ ){ // closure to make sure jQuery = $
  $( function(){ // on document load
    $( ".header" ).click( function( e ){ // select headers and set onClick event handler
      // here you can maybe add a class to an opened header like this
      $( this ).toggleClass( "open" );
      $( this ).next().toggle( "slow", function(){ // toggle visibility
        // what you write here will be executed after the animation
        // "this" will refer to the hidden/revealed div element
        // if you want to call a function depending on if the 
        // panel was opened or closed try this
        if ( $( this ).is( ":visible" ) ) {
          tabOpened( e, this );
        } else {
          tabClosed( e, this );
        }
      }) 
    }).next().hide()
  })
})(jQuery)

整个工作都在jsfiddle http://jsfiddle.net/qpqL9/上进行。

票数 5
EN

Stack Overflow用户

发布于 2012-12-14 14:55:56

您可以很容易地在选项卡上完成的动画的回调函数中调用您的函数。jquery.multi-accordion-1.5.3.js中的细微变化

代码语言:javascript
运行
AI代码解释
复制
$div.slideDown('fast', function(){
    $div.addClass(options._classes.divActive);
    //function to be called after expanding the tabs. 
});

$div.slideUp('fast', function(){
    $div.removeClass(options._classes.divActive);
    //function to be called after collapsing the tabs
});
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13769215

复制
相关文章
bad interpreter 没有那个文件或目录
今天在linux上运行一个python脚本,总是报错bad interpreter,开始我以为是解释器的路径问题,可是whereis python告诉我路径没有错!
老高的技术博客
2022/12/27
1.3K0
/bin/bash^M: 坏的解释器: 没有那个文件或目录
在Linux中有时候我们将在Windows下编写的脚本拷贝到Linux环境中运行时会出现运行不了的情况
水煮麥楽雞
2022/11/20
2.5K0
致命错误: zlib.h:没有那个文件或目录
下面这个错误是因为zlib包没有安装,安装后问题即可解决。但有一点请注意安装命令是:sudo apt-get install zlib1g-dev,而非sudo apt-get install zlib
一见
2018/08/07
3K0
ls: 无法访问/usr/sbin/smartctl: 没有那个文件或目录
环境:RHEL6.5 + Oracle 11.2.0.4 RAC 在安装RAC时,检查时缺少包 cvuqdisk-1.0.9-1,oracle提供脚本修复安装。 但在执行时报错:
Alfred Zhao
2019/05/24
2.2K0
fatal error: boost/algorithm/string.hpp: 没有那个文件或目录 [#c++,VM,linux]
遇见的问题: 解决方法: 在终端输入(如下),安装libboost apt-get install libboost-dev 提醒我说:权限不够 sudo su 输入你的密码 OK~
天天Lotay
2022/12/01
1.9K0
fatal error: boost/algorithm/string.hpp: 没有那个文件或目录 [#c++,VM,linux]
MySQL错误代码大全
在脚本之家看到的这篇文章(http://www.jb51.net/article/46401.htm),转载过来:
保持热爱奔赴山海
2019/09/18
5.7K0
Docker 构建时COPY文件报没有对应文件夹或文件
另外如果找不到目录也需要排查是不是将目录配置在了 .dockerignore 文件里.
拿我格子衫来
2022/01/24
9860
BerkeleyDB .je 在作为存储时的简单使用
最近在研究BDB时发现速度特别快(非关系型数据库)下面我给大家共享一下我在学习的过程中的一些收获和问题,不知道哪位大神帮忙解决一下。主要在putNoDupData,不知道该怎么使用
用户5166556
2019/04/16
1.4K0
解决g++: error: /usr/lib/libuuid.a: 没有那个文件或目录
****uuid是什么**** UUID含义是通用唯一识别码 (Universally Unique Identifier),这 是一个软件建构的标准。 ---- 今天编译源码竟然出现这样的问题:g++: error: /usr/lib/libuuid.a: 没有那个文件或目录。 使用sudo apt-get install uuid-dev安装uuid开发接口后, 头文件/usr/include/uuid/uuid.h存在,但是libuuid.so.1.*和libuuid.a找不到 ---- ****
AlicFeng
2018/06/08
2.6K0
Hive在spark2.0.0启动时无法访问../lib/spark-assembly-*.jar: 没有那个文件或目录的解决办法
最近将整个架构升级到spark 2.0.0之后,发现一个问题,就是每次进行hive --service metastore启动的时候,总是会报一个小BUG。 无法访问/home/ndscbigdata/soft/spark-2.0.0/lib/spark-assembly-*.jar: 没有那个文件或目录。 而这一行究竟是怎么回事,网上没有任何有关的资料。 没办法,只好一步一步分析,终于找到问题的症结。 其主要的原因是:在hive.sh的文件中,发现了这样的命令,原来初始当spark存在的时候,进行spa
sparkexpert
2018/01/09
2K0
MYSQL ERROR CODE 错误编号的意义
1203:当前用户和数据库建立的连接已到达数据库的最大连接数,请增大可用的数据库连接数或重启数据库
全栈程序员站长
2022/07/20
3K0
ThinkPhp3.2.3项目上线,报错SQLSTATE[HY000] [2002] 错误解决
SQLSTATE[HY000] [2002] No such file or directory 错误位置 FILE: /phpstudy/www/mmm/ThinkPHP/Library/Think/Db/Driver.class.php  LINE: 109 TRACE
botkenni
2022/01/10
7290
在Linux中使用rsync进行备份时如何排除文件和目录?
在Linux系统中,rsync是一种强大的工具,用于文件和目录的备份和同步。然而,在进行备份时,我们可能希望排除某些文件或目录,例如临时文件、日志文件或其他不需要备份的内容。本文将介绍在Linux中使用rsync进行备份时如何排除文件和目录的方法。
网络技术联盟站
2023/08/03
4.1K0
在Linux中使用rsync进行备份时如何排除文件和目录?
监控目录或文件变化
# watchdog介绍 Watchdog的中文的“看门狗”,有保护的意思。最早引入Watchdog是在单片机系统中,由于单片机的工作环境容易受到外界磁场的干扰,导致程序“跑飞”,造成整个系统无法正常工作,因此,引入了一个“看门狗”,对单片机的运行状态进行实时监测,针对运行故障做一些保护处理,譬如让系统重启。这种Watchdog属于硬件层面,必须有硬件电路的支持。 Linux也引入了Watchdog,在Linux内核下,当Watchdog启动后,便设定了一个定时器,如果在超时时间内没有对/dev/Watc
章工运维
2023/05/19
6970
ERROR 2002 (HY000): Can't connect to local MySQL server through socket
    在安装好了MySQL之后,使用了新的配置文件后,MySQL服务器可以成功启动,但在登陆的时候出现了ERROR 2002 (HY000): Can't connect to local MySQL server through socket,即无法通过socket连接到mysql服务器,同时提供了socket文件的位置。下面是这个问题的描述与解决办法。
Leshami
2018/08/13
1.3K0
FTP目录或文件名有中文时导致,下载失败的问题
在FTPClient ftpClient = new FTPClient()代码后,
程序员一一涤生
2019/09/10
3.6K0
mysql ERROR 2002 (HY000): '/tmp/mysql.sock' 问题解决
一直用的好好的,突然就不能用了, 然后在网上搜了一圈,什么改配置my.cnf, 什么改软连接啊,换用5.7版本,都用了一次,结论是都不对.
solate
2019/07/22
29.9K3
Docker下搭建禅道管理系统
禅道是第一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。
wencheng
2020/10/22
1.6K0
Docker下搭建禅道管理系统
在使用Git时你应该这样提交代码
目前大部分公司都在使用 Git 作为版本控制,每个程序员每天都要进行代码的提交。很多开发者也包括我自己,有时候赶时间或者图省事,就这么提交:
码农小胖哥
2021/02/01
1.4K0
linux 查找目录或文件详解
查找目录:find /(查找范围) -name '查找关键字' -type d 查找文件:find /(查找范围) -name 查找关键字 -print
流柯
2018/08/30
5.9K0

相似问题

SQLSTATE[HY000] [2002]没有这样的文件或目录

67

SQLSTATE[HY000] [2002]没有这样的文件或目录

12

错误: SQLSTATE[HY000] [2002]没有这样的文件或目录

20

Laravel : SQLSTATE[HY000] [2002]没有这样的文件或目录

19

PDOException: SQLSTATE[HY000] [2002]没有这样的文件或目录

1010
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文