手风琴第一活跃

Question

我想在页面加载时自动打开手风琴的第一个选项卡。 一些解决方案有效但是当我点击一个选项卡时它有很多错误：X就像第一个选项卡打开一样当我开始点击他时广告关闭但是当我点击另一个时它应该关闭aswel

我尝试了不同的东西但没有成功喜欢：

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

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

这是我的插件代码 ^^:)

 (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="test"> <h1 class="title">Title 05</h1> <div class="content">Lorem ipsum dolor sit amet? consectetur adipisicing elit. Veniam, praesentium quis molestiae quia iusto quae commodi ad, totam ratione porro nisi nesciunt ipsum amet dolores delectus esse modi. Illo ducimus adipisci officiis natus, molestias officia! Natus perspiciatis eum inventore, temporibus praesentium sint quae ipsam veritatis deleniti ex ratione dolore maiores tempora similique officiis. Quasi, maxime, cupiditate! Voluptates corrupti ad veritatis recusandae iste maiores nisi, repellat, nobis doloribus numquam soluta omnis, commodi suscipit. Tempore aliquid nisi magnam libero ducimus delectus molestiae, distinctio laboriosam incidunt magni nostrum aperiam quisquam ipsum quo quam voluptatibus in corporis debitis, aut et laborum eaque doloribus assumenda?</div> </div> </div>

谢谢=D

Answer 1

请试试：

   $(document).ready(function () {
        $("a:nth-child(1)").trigger("click");
   });