Jquery, найти ближайший соседний элемент с классом
Добрый день!
Есть простой код. При клике по любому 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;
});
});
|
eddin, .next('.moveout_body')
$('.moveout_go').on('click', function () {
$(this).next('.moveout_body').slideToggle(200);
});
|
Rise,
Цитата:
|
:write:
<!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>
|
Эх..., неужели нельзя сделать? По сути получается, что при нажатии на "123" надо просто найти ближайший соседний элемент, идущий следующим, с классом moveout_body и сработать на нём. Неужто в Jquery нет такого?
Цитата:
рони, ваш последний вариант. Дело в том, что неизвестно количество пунктов. |
Цитата:
|
Цитата:
Цитата:
надо только почитать документацию на css и jquery |
eddin,
варианты 1,2,3 это чуть-чуть исправленные варианта Rise, :lol: может кто-то ещё предложит своё решение? |
Цитата:
Ещё на ум приходит вариант просто пересчитывать moveout_go и moveout_body, ну и раскрывать тот moveout_body, который будет с таким же индексом, что и moveout_go. Но это каким-то извращением попахивает, да и ресурсоёмкая штука мне кажется получится. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.moveout_body {
display: none;
}
</style>
<script type='text/javascript'>
$(function(){
var go=$('.moveout_go');
var bd=$('.moveout_body');
$('.moveout_go').on('click', function () {
//1 вариант
var i=go.index(this);
bd.eq(i).slideToggle(200);
});
});
</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>
Но чем провинились нексты у ТСа, я х/з... :D P.S. Это не верстка, а черти что! :-/ |
| Часовой пояс GMT +3, время: 05:24. |