javascript - 如何扩展 jQuery Accordion 插件

标签 javascript jquery jquery-ui jquery-plugins jquery-ui-accordion

如何扩展 jQuery 插件?

目前我正在使用 multiopen accordion插件。

我需要添加新功能,例如展开/折叠完成后我需要回调函数,例如 jquery ui Accordion 插件中的更改事件。

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

最佳答案

你不需要 Accordion 小部件。你可以用几行 jQuery 来做到这一点。

html:

<h3 class="header"> Title 1 </h3>
<div class="content"> Content 1 </div>
<h3 class="header"> Title 2 </h3>
<div class="content"> Content 2 </div>

javascript/jQuery:

( 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/

关于javascript - 如何扩展 jQuery Accordion 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13769215/

相关文章:

javascript - 免费 JavaScript 工具栏菜单

jQuery CSS 范围

javascript - 根据给定值将运算从求和更新为减法,反之亦然

javascript - jquery如何判断一个字符串是否在 `options`的 `select`之间?

javascript - 如何在 HTML 中添加 JQuery 代码?

jquery-ui - 如何让 jquery-ui 自动完成退出 iframe?

jquery - 什么是 attr 'gtbfieldid' 以及如何避免自动完成行为?

javascript - mapbox-gl-js:矢量切片 - 在客户端更改/添加特征属性的最有效方式?

javascript - window.onload 与 document.onload