Форум

wizard2014 · #1 (**permalink**) 13.03.2014, 20:42

Здравствуйте. Ситуация следующая: есть меню вложенных друг в друга accordion'ов. При открытии внутреннего аккордеона внешний сворачивается, чего хотелось бы избежать.

$(function() {
			$(".accordion").accordion({
				header: 'h3',				
				active: false,
				collapsible: true,
				heightStyle: "content"
			});
			
		});

<div class="accordion">
	  <h3>Section 1</h3>
	  <div>
		<div class="accordion">
			<h3>Inner Section 1</h3>
			<div>
				Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
				purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
				velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
				suscipit faucibus urna.
			</div>
			
			<h3>Inner Section 2</h3>
			<div>
				Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
				purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
				velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
				suscipit faucibus urna.
			</div>
		</div>
	  </div>
	  <h3>Section 2</h3>
	  <div>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
	  </div>
	</div>

Буду признателен за идеи! Может кто-то уже сталкивался с такой проблемой. (http://jsfiddle.net/wizard2014/5yQHR/)

рони · #2 (**permalink**) 13.03.2014, 21:36

wizard2014,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  <script type='text/javascript' src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(window).load(function(){
$(".accordion").each(function(){
      $(this).accordion({
				header: $(this).children("h3"),
				active: false,
				collapsible: true,
				heightStyle: "content"

			})
});
});
</script>
</head>
<body>
  <div class="accordion">
	  <h3>Section 1</h3>
	  <div>
		<div class="accordion">
			<h3>Inner Section 1</h3>
			<div>
				Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
				purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
				velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
				suscipit faucibus urna.
			</div>

			<h3>Inner Section 2</h3>
			<div>
				Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
				purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
				velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
				suscipit faucibus urna.
			</div>
		</div>
	  </div>
	  <h3>Section 2</h3>
	  <div>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
	  </div>
	</div>
</body>
</html>

wizard2014 · #3 (**permalink**) 13.03.2014, 21:48

рони,
Премного благодарен, все как нужно!

рони · #4 (**permalink**) 19.03.2014, 00:51

wizard2014,
всё было гораздо проще - строка 13

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.js'></script>
  <script type='text/javascript' src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(window).load(function(){

      $(".accordion").accordion({
				header: "> h3",
				active: false,
				collapsible: true,
				heightStyle: "content"

			})

});
</script>
</head>
<body>
  <div class="accordion">
	  <h3>Section 1</h3>
	  <div>
		<div class="accordion">
			<h3>Inner Section 1</h3>
			<div>
				Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
				purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
				velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
				suscipit faucibus urna.
			</div>

			<h3>Inner Section 2</h3>
			<div>
				Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
				purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
				velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
				suscipit faucibus urna.
			</div>
		</div>
	  </div>
	  <h3>Section 2</h3>
	  <div>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
	  </div>
	</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript