Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.03.2014, 20:42
Интересующийся
Отправить личное сообщение для wizard2014 Посмотреть профиль Найти все сообщения от wizard2014
 
Регистрация: 11.05.2012
Сообщений: 12

Accordion + stopPropagation
Здравствуйте. Ситуация следующая: есть меню вложенных друг в друга 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 13.03.2014 в 21:40.
Ответить с цитированием
  #3 (permalink)  
Старый 13.03.2014, 21:48
Интересующийся
Отправить личное сообщение для wizard2014 Посмотреть профиль Найти все сообщения от wizard2014
 
Регистрация: 11.05.2012
Сообщений: 12

рони,
Премного благодарен, все как нужно!
Ответить с цитированием
  #4 (permalink)  
Старый 19.03.2014, 00:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
скрипт Accordion и Tabs barracuda116 jQuery 2 14.01.2013 17:05
Проблема с Accordion skeef jQuery 1 14.02.2012 12:49
Accordion menu (1k) Constantin.UK Элементы интерфейса 4 10.03.2011 11:53
jQuery- нужна помощь! pavlas jQuery 10 03.06.2010 16:59
Accordion на Mootols, как сделать активацию при наведении курсора? gwen Библиотеки/Тулкиты/Фреймворки 1 18.08.2009 00:03