2

ここからアコーディオンをダウンロードしました: http://www.snyderplace.com/demos/accordion.html上司から、ユーザーが各ヘッダーをクリックしたときに機能を開いたり閉じたりしたいと言われました。

たとえば、あるヘッダーをクリックするとそのヘッダーが開き、別のヘッダーをクリックするとそのヘッダーも開きますが、ヘッダーを再度クリックしない限り、以前に開いたヘッダーは閉じません。

次のコードを変更することで、それを達成できました。

    animateClose: function (elem, opts) {

これに：

    animateClose: function (elem) {

問題は、ヘッダーを 2 回ではなく 1 回クリックする必要があることです。これを修正できる方法はありますか？

これは完全なコードです:

    <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 に答える