Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 11.11.2016, 10:49
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,671

eddin, .nextAll('.moveout_body').first()
Ответить с цитированием
  #12 (permalink)  
Старый 11.11.2016, 10:51
Аспирант
Отправить личное сообщение для eddin Посмотреть профиль Найти все сообщения от eddin
 
Регистрация: 11.10.2010
Сообщений: 60

Сообщение от рони Посмотреть сообщение
а может и больше вариантов решения
надо только почитать документацию на css и jquery
Ну CSS я знаю очень хорошо, а jquery читал конечно, но что-то не нашел подходящего варика.
Ещё на ум приходит вариант просто пересчитывать moveout_go и moveout_body, ну и раскрывать тот moveout_body, который будет с таким же индексом, что и moveout_go. Но это каким-то извращением попахивает, да и ресурсоёмкая штука мне кажется получится.
Ответить с цитированием
  #13 (permalink)  
Старый 11.11.2016, 10:53
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,160

Сообщение от рони
может кто-то ещё предложит своё решение?
Мне понравился твой вариант, предложенный в другой теме...

<!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>

Но чем провинились нексты у ТСа, я х/з...

P.S.
Это не верстка, а черти что!
Ответить с цитированием
  #14 (permalink)  
Старый 11.11.2016, 10:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,160

Или
$(function(){
	$('.moveout_go').on('click', function () {
		//2 вариант    
		$(this).nextAll('.moveout_body').eq(0).slideToggle(200);
	});
});
Ответить с цитированием
  #15 (permalink)  
Старый 11.11.2016, 11:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Сообщение от ksa
Мне понравился твой вариант,
вариант 3 - ок!
Сообщение от ksa
//2 вариант
ok
Ответить с цитированием
  #16 (permalink)  
Старый 11.11.2016, 11:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085


<!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 вариант $(this).nextAll('.moveout_body:first').slideToggle(200);
     $(' ~ .moveout_body:first', this).slideToggle(200); //2 вариант
    //3 вариант $('.moveout_body').eq($('.moveout_go').index(this)).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>
Ответить с цитированием
  #17 (permalink)  
Старый 11.11.2016, 11:21
Аспирант
Отправить личное сообщение для eddin Посмотреть профиль Найти все сообщения от eddin
 
Регистрация: 11.10.2010
Сообщений: 60

Rise, ksa, рони, спасибо, господа!
рони, ваш сарказми и иронию оценил Блин, ну нет у меня времени погружаться в jquery.((( Вы не представляете как бы я был рад, если бы у меня было время на изучение JS, но это только мечты...

Остановился на этих вариантах:

<script>
			$(function() {
				$(".moveout_go").on('click', function(){
					
					var $moveout_body = $(this).nextAll('.moveout_body').first();

					if ($moveout_body.is(":hidden")) {
						$moveout_body.slideDown(200);
					} else {
						$moveout_body.slideUp(200);
					}
					return false;
				});
			});
		</script>
		
		<script>
			$(function() {
				$(".moveout_go").on('click', function(){
					
					var moveout_body = $(this).nextAll('.moveout_body').eq(0);

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


не знаю какой выбрать, но мне кажется по производительности они на одном уровне, если не так, то помогите с выбором.

ps
Сообщение от ksa Посмотреть сообщение
Но чем провинились нексты у ТСа, я х/з...
Ну я писал выше, что может иногда BR быть больше одного.
Сообщение от ksa Посмотреть сообщение
P.S.
Это не верстка, а черти что!
Самому тошно , но имеем то, что имеем.

pps Rise и рони что-то не даёт сайт карму поднять, пишет что сначала надо кому-то ещё это сделать. Странная система конечно.

Последний раз редактировалось eddin, 11.11.2016 в 11:25.
Ответить с цитированием
  #18 (permalink)  
Старый 11.11.2016, 12:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Сообщение от eddin
Остановился на этих вариантах:
вам показали нормальные варианты ... зачем нужно делать
if ($moveout_body.is(":hidden"))
Ответить с цитированием
  #19 (permalink)  
Старый 11.11.2016, 13:49
Аспирант
Отправить личное сообщение для eddin Посмотреть профиль Найти все сообщения от eddin
 
Регистрация: 11.10.2010
Сообщений: 60

Сообщение от рони Посмотреть сообщение
вам показали нормальные варианты ... зачем нужно делать
if ($moveout_body.is(":hidden"))
Блин, точно. Спасибо! Голова совсем не варит уже. Вот такой итоговый вариант получился, с выносом во внешний файл JS:

$(function() {
	$(".moveout_go").on('click', function(){
		var $this = $(this), $mb = $this.nextAll('.moveout_body').eq(0);
		$this.toggleClass("top_arr");
		$mb.slideToggle(200);
		return false;
	});
});


А ещё подскажите, плз, имеет ли смысл в данном случае объявлять переменные или лучше всё указать вот так?

$(function() {
	$(".moveout_go").on('click', function(){
		$(this).toggleClass("top_arr");
		$(this).nextAll('.moveout_body').eq(0).slideToggle(200);
		return false;
	});
});
Ответить с цитированием
  #20 (permalink)  
Старый 11.11.2016, 14:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Сообщение от eddin
имеет ли смысл в данном случае объявлять переменные
да
Сообщение от eddin
или лучше всё указать вот так?
тогда вот как можно
$(function() {
	$(".moveout_go").on('click', function(){
		$(this).toggleClass("top_arr")
		.nextAll('.moveout_body').eq(0).slideToggle(200);
		return false;
	});
});
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как перерендерить элемент в jQuery Mobile v1.1.1 ? mitiya Мобильный JavaScript 4 08.08.2012 01:26
Как найти элемент на странице зная только z-index Telnet jQuery 3 09.11.2011 16:46
Найти проблему с jQuery или писать js? Saladdin Элементы интерфейса 0 17.03.2011 17:02
Jquery по клику спрятать/показать элемент qwermjk jQuery 7 02.07.2010 22:02
Помогите книгу найти по jQuery micscr Оффтопик 4 14.11.2009 00:42