아코디언과 유사한 jQuery 플러그인을 찾고 있지만 한 번에 여러 섹션이 열릴 수 있습니다 [폐쇄

StackOverflow https://stackoverflow.com/questions/1628006

  •  06-07-2019
  •  | 
  •  

문제

JQuery Accordion 플러그인이 제공하는 것과 유사한 UI 요소를 찾고 있지만 사용자는 여러 섹션을 한 번에 열 수 있도록합니다.

문서에는 다음과 같은 말이 있으며 코드 스 니펫이있는 대체 접근법을 제안합니다 (아래 참조). 그것은 훌륭하고 전부이며, 그들이 제공하는 코드는 기본적으로 작동하지만 클래스를 전환하고 XHTML에서 수동으로 테마를 적용하는 것과 같은 플러그인에 내장 된 많은 것들을 재현하고 있습니다.

내 질문 :

  1. 수동 경로를 따라 너무 멀리 가기 전에 한 번에 여러 패널이 열릴 수 있도록 비슷한 플러그인 또는 MOD를 알고 있습니까?

  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();
});
도움이 되었습니까?

해결책

모든 사람의 제안에 감사하지만 마침내 내가 찾고 있던 일을 정확하게하는 것을 발견했습니다. 나는 비슷한 것을 필요로하는 다른 사람에게 답으로 추가하고 있습니다.

해결책
코드 및 샘플 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>

다른 팁

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>

자바 스크립트 코드

$(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
});

업데이트 : 플러그인이 기본 활성 탭 옵션을 지원하도록 업데이트되었습니다.

Matthew Brown도 말한 것처럼 가장 좋은 해결책은 섹션 당 1 아코디언을 사용하는 것입니다.

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

아마도 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();

지난주 온라인에서 찾은 코드를 수정하여 비슷한 솔루션을 찾았습니다. 이것은 각 아코디언이 중첩되지 않은 목록이라고 가정합니다. 이것을 작동 시키려면 당신은 있어야합니다 고유 한 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로, 페이지로드의 일치 요소에 대한 아코디언을 자동 열어줍니다.

편집 아나스나 카와 그것들을위한 코드 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>

자바 스크립트 :

$(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 Custom Scrollbar를 사용하는 경우 IE에 문제가있을 수 있습니다. IE는 오류를 삭제합니다

유효하지 않은 인수, 라인 XX, 캐릭터 XXX

Malihu Scrollbar (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;
}

이것은 나에게 진짜 두통을 주었다

이 코드 스 니펫은 코너 문제를 수정합니다 (확장 할 때 헤더 하단 코너가 사라져야합니다)

$("#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();

<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 아코디언)를 사용하는 것입니다. 위의 JohnFX의 솔루션을 사용하려고 시도했지만 기본 아코디언으로는 없었던 스타일 문제를 일으켰습니다. 2 개의 섹션 단일 아코디언을 두 개의 별도 아코디언으로 나누면 스타일을 잘 유지할 수있었습니다. 또한 내부 CSS 및 아코디언의 HTML 구현을 처리 할 필요는 없습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top