web-dev-qa-db-ja.com

アコーディオンに似たJQueryプラグインを探していますが、複数のセクションを一度に開くことができます

JQUERYアコーディオンプラグインが提供するものと同様のUI要素を探していますが、ユーザーは一度に複数のセクションを開いたままにしておくことができます。

ドキュメントには次のように書かれており、コードスニペットを使用した別のアプローチを提案しています（以下を参照）。それは素晴らしいことであり、それらが提供するコードは基本的に機能しますが、クラスを切り替えたり、XHTMLでテーマを手動で適用したりするなど、プラグインに組み込まれている多くのものを再作成しています。

私の質問：

  1. 手動ルートに進む前に、同じようなプラグイン、または複数のパネルを一度に開くことができるようにこれに変更したプラグインを知っている人はいますか？

  2. 他のオプションのためにGoogleに使用できる複数の開いたパネルを許可するアコーディオンのようなコントロールの別の一般名はありますか？

重要な場合は、ドキュメントから以前に参照した部分を次に示します。

注：一度に複数のセクションを開きたい場合は、アコーディオンを使用しないでください

アコーディオンでは、同時に複数のコンテンツパネルを開くことはできません。そのためには、多大な労力が必要です。複数のコンテンツパネルを開くことができるウィジェットを探している場合は、これを使用しないでください。通常、代わりに数行のjQueryを使用して、次のように記述できます。

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
});

Or animated:

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle('slow');
        return false;
    }).next().hide();
});
jqueryjquery-plugins
24
JohnFx

みんなの提案に感謝しますが、私はついに自分が探していたものを正確に実行する何かを自分で見つけました。似たようなものが必要な人への答えとして追加します。

解決策
コードとサンプルXHTMLを使用して ここJQueryアコーディオンプラグイン を拡張して、複数のパネルを一度に開いて、テーマやその他の機能を提供し続けることができますスタイルを再作成せずにプラグインで。

完全な例については、上記のリンク先のサイトを参照してください。ただし、アコーディオンコントロールで複数のパネルを開くことができるようにするために必要なコードの要点は次のとおりです。プラグインのドキュメントで説明されているように、同じHTMLを使用してヘッダーとコンテンツを定義します

    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.accordion.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons")
        .find("h3")
            .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
            .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
            .click(function() {
                $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active")
                    .toggleClass("ui-state-default").toggleClass("ui-corner-bottom")
                .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s")
                .end().next().toggleClass("ui-accordion-content-active").toggle();
                return false;
            })
            .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();
    })
    </script>
19
JohnFx

JQuery UIアコーディオンと同じ外観で、すべてのタブ\セクションを開いたままにできるjQueryプラグインを作成しました

あなたはここでそれを見つけることができます

http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

同じマークアップで動作します

<div id="multiOpenAccordion">
        <h3><a href="#">tab 1</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
        <h3><a href="#">tab 2</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
</div>

Javascriptコード

$(function(){
        $('#multiOpenAccordion').multiAccordion();
       // you can use a number or an array with active option to specify which tabs to be opened by default:
       $('#multiOpenAccordion').multiAccordion({ active: 1 });
       // OR
       $('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] });

       $('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs
});

更新：プラグインが更新され、デフォルトのアクティブタブオプションがサポートされるようになりました

14
Anas Nakawa

Matthew Brownも言ったように、最良の解決策はセクションごとに1つのアコーディオンを使用することです。

$( "#accordion1" ).accordion({ collapsible: true });
$( "#accordion2" ).accordion({ collapsible: true });
$( "#accordion3" ).accordion({ collapsible: true });
3
Asad Usman Khan

おそらく1.8.5のためにいくつかのことを変更しました。

トグルを移動すると、状態変更の問題が修正されました（[表示]をクリック、[非表示なし]をクリック、[非表示]をクリック、[表示]をクリック、[非表示]をクリック...）クラスが多少不一致のjqueryのテンプレートとレンダリングに問題があった

    $(".colapse").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons")
  .find("h3")       
          .addClass("ui-accordion-header ui-helper-reset ui-corner-all ui-state-default")
          .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
          .click(function() {
              $j(this).toggleClass("ui-accordion-header-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top").toggleClass("ui-state-active")
                          .toggleClass("ui-state-default")
                  .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s")
                  .end().next().toggle().toggleClass("ui-accordion-content-active");
              return false;
          })
          .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();
2
Marty Trenouth

編集されたanasnakawaコードjQuery UIアコーディオンスタイリングを必要としないそしてコードをシンプルに保ちたい。 （お役に立てば幸いです）

HTML：

<div id="multiOpenAccordion">
        <h3>tab 1</h3>
        <div>A lot of text</div>
        <h3>tab 2</h3>
        <div>A lot of thex 2</div>
</div>

Javascript：

$(function(){
        $('#multiOpenAccordion').multiAccordion();
});

変更されたコード：

(function($){
    $.fn.extend({ 
        multiAccordion: function(options) {
            var defaults = {};
            var options =  $.extend(defaults, options);
            return this.each(function() {
                var $this = $(this);
                var $h3 = $this.children('h3');
                var $div = $this.children('div');

                $h3.click(function(){
                    var $this = $(this);
                    var $div = $this.next();

                    if ($this.hasClass('closed')) {
                        $this.removeClass('closed').addClass('open');
                        $div.slideDown('fast');
                    } else {
                        $this.removeClass('open').addClass('closed');
                        $div.slideUp('fast');
                    }
                });
            });
        }
    });
})(jQuery);

編集：Malihuカスタムスクロールバーを使用している場合は、IEに問題がある可能性があります。 IEエラーをドロップして

無効な引数、行xx、文字xxx

このコードをMalihuスクロールバー（1000pxを超えるグリッチのあるコンテンツのスクロールを担当）から削除しました-役に立ちました。

$.fx.prototype.cur = function(){
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
      return this.elem[ this.prop ];
    }
    var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    return typeof r == 'undefined' ? 0 : r;
}

これは私に本当の頭痛を与えました

1
karlisup
<ul class="accordion">
        <li id="one" class="files">
            <a href="#one">Admin Video</a>
            <ul class="sub-menu">
                <li><a href="<?php echo base_url();?>index.php/admin/adminvideo/addvideo"><em>01</em>Add video</a></li>
                <li><a href="<?php echo base_url();?>index.php/admin/adminvideo"><em>02</em>List Video</a></li>
                <li><a href="<?php echo base_url();?>index.php/admin/adminvideo/categorys"><em>03</em>Video Categories</a></li>                 
            </ul>
        </li>

        <li id="two" class="mail">
            <a  href="#two">Users</a>
            <ul class="sub-menu">
                <li><a href="<?php echo base_url();?>index.php/admin/admin/listsubs"><em>01</em>Subscribers List</a></li>
                <li><a href="<?php echo base_url();?>"><em>02</em>User Video Suggestion</a></li>
            </ul>
        </li>


        <li id="three" class="cloud">
            <a class="active" href="#three">Background Image options</a>
            <ul class="sub-menu">
                <li><a href="<?php echo base_url();?>index.php/admin/adminsettings"><em>01</em>Add</a></li>
                <li><a href="<?php echo base_url();?>index.php/admin/adminsettings/listbgs"><em>02</em>List</a></li>
            </ul>
        </li>
    </ul>

$(document).ready(function() {


    var accordion_head = $('.accordion > li > a'),
        accordion_body = $('.accordion li > .sub-menu');
    $.each($(".accordion > li > a"), function(){
        if($(this).attr('class') == 'active')
        {
            $(this).next().slideDown('normal');
        }           
    });



    // Open the first tab on load

    //accordion_head.first().addClass('active').next().slideDown('normal');

    // Click function

    accordion_head.on('click', function(event) {

        // Disable header links

        event.preventDefault();

        // Show and hide the tabs on click

        if ($(this).attr('class') != 'active'){
            accordion_body.slideUp('normal');
            $(this).next().stop(true,true).slideToggle('normal');
            accordion_head.removeClass('active');
            $(this).addClass('active');
        }

    });

});

それがあなたを助けることを願っています

1
shamim s

このコードスニペットは、コーナーの問題を修正します（拡張するとヘッダーの下のコーナーが消え、その逆も同様です）

$("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons")
.find("h3")
        .addClass("ui-accordion-header ui-helper-reset ui-corner-bottom ui-corner-top ui-state-default")
        .hover(function() { $(this).toggleClass("ui-state-hover"); })
        .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
        .click(function() {
            $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active")
                .toggleClass("ui-state-default").toggleClass("ui-corner-bottom")
                .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s")
                .end().next().slideToggle().toggleClass("ui-accordion-content-active");
            return false;
        })
        .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();
1
Mickey Shine

先週オンラインで見つけたコードをいくつか変更して、同様の解決策を探しました。これは、各アコーディオンがネストされた順序なしリストであることを前提としています。これを機能させるには、アコーディオンごとに一意のIDが必要です。次に例を示します。

[〜＃〜] html [〜＃〜]

<ul id="uniqueAccordion1" class="menu">
    <li class="noaccordion">
        <a href="#">Top Level 1</a>
        <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Top Level 2</a>
        <ul>
            <li><a href="#">Sub 3</a></li>
            <li><a href="#">Sub 4</a></li>
        </ul>
    </li>
</ul>

[〜＃〜] js [〜＃〜]

$(function() {
    // initialize admin menu
    loadNav();
});
function loadNav() {
    // initially show opened
    $.each($('ul.menu'), function(){
        $('#' + this.id + ' .expandfirst ul:first').show();
    });

    // watch for click
    $('ul.menu li > a').click(function() {
        var $this = $(this);
        var $parent = $this.parent();
        if ($parent.hasClass('noaccordion')) {
            return false;
        }
        var $checkElement = $this.next();
        if ($checkElement.is('ul')) {
            $checkElement.slideToggle('fast');
        }
        return false;
    });
}

これをサポートするには独自のCSSが必要ですが、アコーディオンをいくつでも使用でき、クラスを追加することで特定のセクションを閉じることを無効にすることもできます（たとえば、これをナビゲーションに使用する場合）noaccordionメインレベルのLIタグに。最後に、クラスexpandfirstをメインレベルのLIに追加して、ページの読み込み時に一致する要素のアコーディオンを自動的に開くことができます。

1
Corey Ballou

別の可能性は、複数のアコーディオンインスタンスを使用することです（セクションごとに1つのアコーディオン）。上記のJohnFxのソリューションを使用してみましたが、デフォルトのアコーディオンでは発生しなかったスタイルの問題が発生しました。 2セクションのシングルアコーディオンを2つの別々のアコーディオンに分割したとき、スタイリングをうまく保つことができました。さらに、アコーディオンの内部cssおよびhtml実装を処理する必要はありません。

0
skeletank