jquery - 手风琴第一个活跃(Accordion first one active)

Question

I would like to open the firs tab of my accordion automatically when the page loads.

(我想在页面加载时自动打开手风琴的firs标签。)

Some solutions works but when i click on a tab it's quite buggy :X Like the first tab is opened ad closes just when i start clicking on him but it should close when i click on another one aswel

(某些解决方案有效，但是当我单击选项卡时，它是相当有问题的：X就像打开了第一个选项卡一样，广告仅在我开始单击他时关闭，但在我单击另一个时它应该关闭)

I tried differents things but without success Like :

(我尝试了不同的事情，但没有成功，就像：)

var $partChildren = $(".part").first().children();
$partChildren.first().addClass("open");
$partChildren.last().css("display", "block");

$(this).find(_settings.contentSelector).first();

Here's the code of my plugin ^^ :)

(这是我的插件^^的代码：）)

 (function($) { $.fn.MyAccordion = function(__options) { var _settings = $.extend({ childrenSelector: "li", titleSelector: "> a", contentSelector: "> p", autoScroll: false, scrollOffset: 100, animated: true, scrollAnimationDuration: 500, childAnimationDuration: 400, onOpened: function($__child) {}, onClosed: function($__child) {} }, __options); function closeChild($__child) { if (_settings.animated == true) { $__child.find(_settings.contentSelector).slideUp(_settings.childAnimationDuration); } else { $__child.find(_settings.contentSelector).hide(); } $__child.find(_settings.titleSelector).removeClass("open"); _settings.onClosed($__child); } function openChild($__child) { if (_settings.animated == true) { $__child.find(_settings.contentSelector).slideDown(_settings.childAnimationDuration, function(){ if (_settings.autoScroll == true) { var offset = $(this).offset().top - _settings.scrollOffset; $('html, body').animate({ scrollTop: offset }, _settings.scrollAnimationDuration); } }); } else { $__child.find(_settings.contentSelector).show(); if (_settings.autoScroll == true) { var offset = $__child.offset().top - _settings.scrollOffset; $('html, body').scrollTop(offset); } } $__child.find(_settings.titleSelector).addClass("open"); _settings.onOpened($__child); } return this.each(function() { var $group = $(this); var $openedChild = null; $group.find(_settings.childrenSelector).each(function(){ var $child = $(this); var $content = $(this).find(_settings.contentSelector); var $title = $(this).find(_settings.titleSelector); $content.hide(); $title.click(function(__event) { __event.preventDefault(); if ($openedChild != null) { closeChild($openedChild); } if ( $openedChild == null || ( $openedChild != null && !$child.is($openedChild) ) ) { openChild($child); $openedChild = $child; } else { $openedChild = null; } }); }); }); } }(jQuery)); $(function(){ /* ##################### */ /* ##### STRUCTURE ##### */ /* ##################### */ /* $(".blocConteneur").MyAccordeon({ childrenSelector: ".blocConteneurEnfant", titleSelector: ".titreClicable", contentSelector: ".texteCaché", autoScroll: true/false, scrollOffset: durée, animated: true/false, scrollAnimationDuration: durée, childAnimationDuration: durée, }); */ /* ################### */ /* ##### EXEMPLE ##### */ /* ################### */ $('ul').MyAccordion({ // Sur celui là on va tous désactiver autoScroll: false, scrollOffset: 0, animated: false, scrollAnimationDuration: 0, childAnimationDuration: 0, }); $('.collapsible').MyAccordion({ // Sur celui là on va tout activer childrenSelector: ".test", titleSelector: ".title", contentSelector: ".content", autoScroll: true, scrollOffset: 100, animated: true, scrollAnimationDuration: 500, childAnimationDuration: 400, }); }); 

 * { /*border: 1px solid black;*/ margin: 0; padding: 0; } html { background-color: #009985; position: relative; height: 5000px; font-family: 'Share', cursive; } body { width: 60%; position: absolute; top: 200px; left: 50%; transform: translateX(-50%); } ul { display: block; list-style-type: none; } a, h1 { text-decoration: none; font-size: 20px; font-weight: normal; color: white; display: block; } div.collapsible { display: block; margin-top: 100px; } a, h1 { padding-left: 10px; padding-top: 10px; padding-bottom: 10px; background-color: #1a1a1a; } ul li { border-bottom: 1px solid white; } ul li:last-child { border: none; } p, .content { background-color: white; padding: 10px; } div.content:last-child { border: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <ul> <li> <a href="#">Title 01</a> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil incidunt blanditiis repellendus nulla error quaerat praesentium sint possimus est vel eveniet deserunt accusantium veniam ullam ex, illo consectetur optio deleniti laudantium quisquam quis quibusdam temporibus corporis autem! Assumenda ex cumque, mollitia non quisquam deserunt voluptatibus culpa sit cum voluptatum molestiae, ipsam debitis quasi inventore alias. Reiciendis, architecto! Quod iusto, asperiores ipsum nesciunt officia repellendus libero, suscipit blanditiis architecto labore necessitatibus itaque natus eveniet quia nam sunt magni hic animi molestias. Officiis eos, magnam necessitatibus nulla quae amet odit omnis tempore ducimus sunt totam praesentium aperiam illum impedit quis et. Quidem. </p> </li> <li> <a href="#">Title 02</a> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil incidunt blanditiis repellendus nulla error quaerat praesentium sint possimus est vel eveniet deserunt accusantium veniam ullam ex, illo consectetur optio deleniti laudantium quisquam quis quibusdam temporibus corporis autem! Assumenda ex cumque, mollitia non quisquam deserunt voluptatibus culpa sit cum voluptatum molestiae, ipsam debitis quasi inventore alias. Reiciendis, architecto! Quod iusto, asperiores ipsum nesciunt officia repellendus libero, suscipit blanditiis architecto labore necessitatibus itaque natus eveniet quia nam sunt magni hic animi molestias. Officiis eos, magnam necessitatibus nulla quae amet odit omnis tempore ducimus sunt totam praesentium aperiam illum impedit quis et. Quidem. </p> </li> <li> <a href="#">Title 03</a> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil incidunt blanditiis repellendus nulla error quaerat praesentium sint possimus est vel eveniet deserunt accusantium veniam ullam ex, illo consectetur optio deleniti laudantium quisquam quis quibusdam temporibus corporis autem! Assumenda ex cumque, mollitia non quisquam deserunt voluptatibus culpa sit cum voluptatum molestiae, ipsam debitis quasi inventore alias. Reiciendis, architecto! Quod iusto, asperiores ipsum nesciunt officia repellendus libero, suscipit blanditiis architecto labore necessitatibus itaque natus eveniet quia nam sunt magni hic animi molestias. Officiis eos, magnam necessitatibus nulla quae amet odit omnis tempore ducimus sunt totam praesentium aperiam illum impedit quis et. Quidem. </p> </li> <li> <a href="#">Title 04</a> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil incidunt blanditiis repellendus nulla error quaerat praesentium sint possimus est vel eveniet deserunt accusantium veniam ullam ex, illo consectetur optio deleniti laudantium quisquam quis quibusdam temporibus corporis autem! Assumenda ex cumque, mollitia non quisquam deserunt voluptatibus culpa sit cum voluptatum molestiae, ipsam debitis quasi inventore alias. Reiciendis, architecto! Quod iusto, asperiores ipsum nesciunt officia repellendus libero, suscipit blanditiis architecto labore necessitatibus itaque natus eveniet quia nam sunt magni hic animi molestias. Officiis eos, magnam necessitatibus nulla quae amet odit omnis tempore ducimus sunt totam praesentium aperiam illum impedit quis et. Quidem. </p> </li> </ul> <!-- Exemple d'une autre structure prossible ! Le plugin est FLEXIBLE. Si tu as envie de ne mettre que des div avec des class différentes, c'est possible, il faut juste les changer dans le js :) --> <div class="collapsible"> <div class="test"> <h1 class="title">Title 01</h1> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil incidunt blanditiis repellendus nulla error quaerat praesentium sint possimus est vel eveniet deserunt accusantium veniam ullam ex, illo consectetur optio deleniti laudantium quisquam quis quibusdam temporibus corporis autem! Assumenda ex cumque, mollitia non quisquam deserunt voluptatibus culpa sit cum voluptatum molestiae, ipsam debitis quasi inventore alias. Reiciendis, architecto! Quod iusto, asperiores ipsum nesciunt officia repellendus libero, suscipit blanditiis architecto labore necessitatibus itaque natus eveniet quia nam sunt magni hic animi molestias. Officiis eos, magnam necessitatibus nulla quae amet odit omnis tempore ducimus sunt totam praesentium aperiam illum impedit quis et. Quidem.</div> </div> <div class="test"> <h1 class="title">Title 02</h1> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nam, id laborum repellat quam accusamus ipsam modi doloribus officiis enim quisquam ea quod repudiandae voluptate repellendus ratione dignissimos nulla dolores! Similique ab doloribus reiciendis, quis sit at ducimus. Corrupti ullam possimus error perferendis, asperiores rerum aliquid, quos similique vero, expedita facilis adipisci nemo explicabo. Esse cupiditate, illo perspiciatis mollitia rerum, iste, sint non facilis labore cum commodi nam beatae officia corporis, inventore. Asperiores ut expedita exercitationem corporis quos soluta unde quibusdam consectetur eius officia tempore porro, sapiente odio cum amet, dicta ipsum earum. Est, illum. Enim quo provident aliquid sit!</div> </div> <div class="test"> <h1 class="title">Title 03</h1> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi tempore nesciunt adipisci, ipsa officiis impedit laboriosam voluptate. Labore eos corrupti facere accusamus laborum eum, earum eius numquam deleniti expedita sed voluptate beatae unde ratione id perspiciatis ducimus repellendus eveniet. Dolores itaque deserunt aperiam ab et facere asperiores soluta accusamus sint excepturi earum quos beatae quam, aspernatur nihil amet perspiciatis natus qui ut consequatur est nesciunt repudiandae nisi vitae. Blanditiis voluptate expedita vero unde, et tempore, cumque ad, distinctio corrupti illo consequatur facere sunt est numquam nulla. Expedita minus ipsum placeat, ipsa ad architecto consequuntur vel, sapiente error saepe at quae?</div> </div> <div class="test"> <h1 class="title">Title 04</h1> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio eum iure quisquam, enim, blanditiis quis natus, aliquam totam asperiores earum dicta nulla, dolores rem ex doloribus quam nobis! Ab, temporibus eos ex perferendis id dicta, nesciunt quibusdam nobis numquam omnis necessitatibus quia sequi repellat aliquam mollitia! Excepturi vitae provident, ratione soluta sequi, magni nostrum rem officia animi amet consectetur tempore beatae cupiditate temporibus rerum omnis optio distinctio odio. Impedit totam tempora sequi numquam adipisci, asperiores alias minus voluptate quae tempore quasi saepe porro libero. Deserunt iusto numquam necessitatibus tempore vel. Dolorum in reprehenderit veniam ullam vitae temporibus sint commodi libero.</div> </div> <div class="te

Answer 1

等待大神答复