2

我从这里下载了我的手风琴：http ://www.snyderplace.com/demos/accordion.html并且我的老板告诉我他希望在用户单击每个标题时打开和关闭该功能。

例如，当您单击一个标题时，它会打开，当您单击另一个标题时，它也会打开，但之前打开的标题不会关闭，除非再次单击该标题。

我可以通过更改以下代码来实现这一点：

    animateClose: function (elem, opts) {

对此：

    animateClose: function (elem) {

现在的问题是标题需要单击一次而不是两次。有没有办法解决这个问题？

这是完整的代码：

    <script type="text/javascript">
    $(document).ready(function() {

    //syntax highlighter
    hljs.tabReplace = ' ';
    hljs.initHighlightingOnLoad();

    //accordion
    $('h3.accordion').accordion({
    defaultOpen: 'section1',
    cookieName: 'accordion_nav',
    speed: 'slow',
    animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
    elem.next().slideFadeToggle(opts.speed);
    },
    animateClose: function (elem) { //replace the standard slideDown with custom function
    elem.next().slideFadeToggle(opts.speed);
    }
    });
    $('h3.accordion2').accordion({
    defaultOpen: 'sample-1',
    cookieName: 'accordion2_nav',
    speed: 'slow',
    cssClose: 'accordion2-close', //class you want to assign to a closed accordion header
    cssOpen: 'accordion2-open',
    });

    //custom animation for open/close
    $.fn.slideFadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    };

    });
</script>
4

2 回答 2

2

jsBin 演示

HTML：

  <div class="accordion">
    <h3>Title 1</h3>
    <div>Content 1...</div>
    <h3>Title 2</h3>
    <div>Content 2...</div>  
    <h3>Title 3</h3>
    <div>Content 3...</div>  
    <h3>Title 4</h3>
    <div>Content 4...</div>  
  </div>

jQuery：

var $accordionIO = $('.accordion h3');
$accordionIO.next('div:gt(0)').hide(); // hide all but first section

$accordionIO.click(function(){
  $(this).next('div').slideToggle();
});
于 2012-10-29T12:59:20.250 回答
1

如果您通读源文件jquery.accordion.js- ，您将看到以下代码：

//opens a accordion panel
function open($this, opts) {
    close(opts);
    //give the proper class to the linked element
    $this.removeClass(opts.cssClose).addClass(opts.cssOpen);

    //open the element
    opts.animateOpen($this, opts);

    //do cookies if plugin available
    if (useCookies(opts)) {
        // split the cookieOpen string by ","
        id = $this.attr('id');
        setCookie(id, opts);
    }
}

正如你所看到的，这个函数做的第一件事是——

    close(opts);

那就是关闭所有打开的标题。我认为，如果您对此行发表评论，您将实现所需的目标。

于 2012-10-29T13:00:08.573 回答