手风琴演奏的第一手

Question

我想在页面加载时自动打开我的手风琴的firs标签。某些解决方案有效，但是当我单击选项卡时，它有很多bug：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

我想在页面加载时自动打开我的手风琴的firs标签。某些解决方案可行，但是当我单击选项卡时，它会出现很多问题：X就像打开第一个选项卡一样，广告仅在...

Answer 1

请尝试：