Форум

eddin · #1 (**permalink**) 11.11.2016, 02:43

Добрый день!
Есть простой код. При клике по любому 123 происходит отображение/скрытие всех блоков под ними. Мне же надо, чтобы отображение скрытие было только ближайшего блока, находящегося под 123, на который кликнули.

Если я заменяю siblings на next, а также удаляю теги BR, то всё работает. Но необходимо, чтобы работало именно с этой вёрсткой. Подскажите, плз.

Вот код

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

	</head>
	<body>
		<ul>
			<li><br>

			<span class="moveout_go">123</span><br>
			<div class="moveout_body">456</div>
			<br>


			<span class="moveout_go">123</span><br>
			<div class="moveout_body">456</div>
			<br>


			<span class="moveout_go">123</span><br>
			<div class="moveout_body">456</div>
			</li>
		</ul>
	</body>
</html>

$(function() {
				$(".moveout_go").on('click', function(){
					
					var $this = $(this), $moveout_body = $(this).siblings('.moveout_body');

					if ($moveout_body.is(":hidden")) {
						$moveout_body.slideDown(200);
					} else {
						$moveout_body.slideUp(200);
					}
					return false;
				});
			});

Rise · #2 (**permalink**) 11.11.2016, 03:30

eddin, .next('.moveout_body')

$('.moveout_go').on('click', function () {
	$(this).next('.moveout_body').slideToggle(200);
});

рони · #3 (**permalink**) 11.11.2016, 03:42

Rise,

Сообщение от eddin

удаляю теги BR, то всё работает. Но необходимо, чтобы работало именно с этой вёрсткой.

Rise · #4 (**permalink**) 11.11.2016, 03:51

рони, пусть span на div заменит и все br удалит они там не нужны)

рони · #5 (**permalink**) 11.11.2016, 03:51

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('.moveout_go').on('click', function () {
    //1 вариант    
    //2 вариант 
    //3 вариант 
});
  </script>
</head>

<body>
<ul>
      <li><br>

      <span class="moveout_go">123</span><br>
      <div class="moveout_body">456</div>
      <br>


      <span class="moveout_go">123</span><br>
      <div class="moveout_body">456</div>
      <br>


      <span class="moveout_go">123</span><br>
      <div class="moveout_body">456</div>
      </li>
    </ul>


</body>
</html>

eddin · #6 (**permalink**) 11.11.2016, 09:25

Эх..., неужели нельзя сделать? По сути получается, что при нажатии на "123" надо просто найти ближайший соседний элемент, идущий следующим, с классом moveout_body и сработать на нём. Неужто в Jquery нет такого?

Сообщение от Rise

пусть span на div заменит и все br удалит они там не нужны)

к сожалению, вёрстка должна оставаться изначальной.

рони, ваш последний вариант. Дело в том, что неизвестно количество пунктов.

Rise · #7 (**permalink**) 11.11.2016, 09:27

eddin, ну сделай два некста подряд не тупи...

eddin · #8 (**permalink**) 11.11.2016, 09:33

Сообщение от Rise

eddin, ну сделай два некста подряд не тупи...

не грубите. а два некста - это очень негибко. там BR может быть иногда больше одного. Да, я написал, что вёрстка должна быть именно такой, но просто рассчитывал, что будет предложен какой-то более универсальный вариант.

рони · #9 (**permalink**) 11.11.2016, 09:48

Сообщение от eddin

Неужто в Jquery нет такого?

Сообщение от рони

//1 вариант //2 вариант //3 вариант

а может и больше вариантов решения
надо только почитать документацию на css и jquery

рони · #10 (**permalink**) 11.11.2016, 09:52

eddin,
варианты 1,2,3 это чуть-чуть исправленные варианта Rise,

может кто-то ещё предложит своё решение?

Форум

Справочник

Discord чат

Курсы javascript