Форум

601t · #1 (**permalink**) 13.01.2016, 12:04

Здравствуйте, уважаемые форумчане! Не могу решить проблему с аккордеоном, который должен раскрываться вверх. По клику на ссылку (Mail либо Mail2) выплывают сразу два sub-menu. Замена .next() на .prev() дает следующий результат: при клике на Mail выплывает Hotmail2, а при клике на Mail2 выплывает Hotmail. Версия jquery 1.7.1. При установке на выплывания вниз все работает отлично. Может кто сможет подсказать, что я делаю неправильно и направить в верное русло?

<style>
.accordion .service2 > .sub-menu {display: none;}
.accordion .service2:target > .sub-menu {display: block;}
</style>
<div class="accordion">
<div class="service2">
	<div class="sub-menu">
		<a href="#">Hotmail2</a>
	</div>
	<a href="#two">Mail2</a>
</div>
<div class="service2">
	<div class="sub-menu">
		<a href="#">Hotmail</a>
	</div>
	<a href="#two">Mail</a>
</div>		
</div>

$(document).ready(function() {
 var accordion_head = $('.accordion > .service2 > a'),
     accordion_body = $('.accordion .service2 > .sub-menu');
 accordion_head.on('click', function(event) {
  event.preventDefault();
  if ($(this).attr('class') == 'active'){
     accordion_body.slideUp('normal');
     $(this).removeClass('active');
     return false;
     }
  if ($(this).attr('class') != 'active'){
	 accordion_body.slideDown('normal');
     $(this).next().stop(true,true).slideUp('normal');
     accordion_head.removeClass('active');
     $(this).addClass('active');
     }
   });
});

рони · #2 (**permalink**) 13.01.2016, 12:48

601t,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .accordion .service2 > .sub-menu {display: none;}
  .accordion .service2 > a.active { background-color: #D3D3D3;}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

 <script>
 $(function() {
 var accordion_head = $('.accordion > .service2 > a'),
     accordion_body = $('.accordion .service2 > .sub-menu');
 accordion_head.on('click', function(event) {
 event.preventDefault();
 accordion_head.not($(this).toggleClass('active')).removeClass('active')
 accordion_body.not($(this).prev().slideToggle()).slideUp('normal');
 });
});

 </script>
</head>

<body>

<div class="accordion">
<div class="service2">
	<div class="sub-menu">
		<a href="#">Hotmail2</a>
	</div>
	<a href="#two">Mail2</a>
</div>
<div class="service2">
	<div class="sub-menu">
		<a href="#">Hotmail</a>
	</div>
	<a href="#two">Mail</a>
</div>
</div>


</body>

</html>

601t · #3 (**permalink**) 13.01.2016, 15:30

рони, благодарствую, то, что нужно!

рони · #4 (**permalink**) 13.01.2016, 15:44

вангую через 3 дня придёт человек и не заметит предыдущих 245 вариантов

Форум

Справочник

Discord чат

Курсы javascript