Изменение свойства z-index.

[LLIypuk]

Всем привет. Есть код.

$(document).ready(function () {
	$('#mobile-one').on('click', function (e) {
		e.preventDefault();
		$('#mobile-block-one').fadeToggle(500).css("display", "block");
	});
});

Из кода ясно что клик по блоку <div id="mobile"></div> открывает скрытый блок <div id="mobile-block"></div> и при повторном нажатии скрывает его.

Однако задача достаточно специфичная. Таких блоков несколько. То-есть несколько кнопок для открытия блоков и самих блоков несколько (пускай у них будут id mobile-block-one и mobile block-two).

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

Однако если у первого блока поставить z-index: 1; тогда уже первый блок всегда будет наложен на второй блок.

Вопрос: Как менять значение z-index, чтобы открываемый блок всегда имел значение z-index больше чем у уже открытого блока и как это реализовать через jQuery ???

PS: В качестве варианта предполагаю только такой вариант измениея я z-index (открыть, закрыть блок) (1, 0, 3, 2, 6, 5, 10, 9, 15, 14, 21, 20).

[Белый шум]

Примерно как-то так:

$('.mobile-blocks').not('#mobile-block-one').each(function(){
  $(this).css('z-index', $(this).css('z-index') - 1);
});
$('#mobile-block-one').css('z-index', 10);

Можно засунуть в параметр start если версия jquery не ниже 1.8 - http://api.jquery.com/fadetoggle/

ADD: а, добавить в начале проверку на display:none или opacity:0, чтобы работало только когда блок начинает показываться, а не скрываться.

[j0hnik]

var i=0, el = $('el'); 
el.click(function(){ 
el.each(function(){ 
var s = $(this).css("zIndex"); 
if (s>i) i=s; 
}); 
$(this).css("zIndex", i++); 
});

максимальный z-index ;

[LLIypuk]

Спасибо всем за ответы. В итоге сделал вот такой код.

$(document).ready(function () {
	$('#mobile-one').on('click', function (e) {
		$('#mobile-block-one').not('#mobile-one').each(function(){
			$(this).css('z-index', $(this).css('z-index') - 1);
		});
	});
});

А также в CSS добавил
#mobile-block-one{z-index:10;}

Вообщем предыдущие варианты не сработали, но благодаря им сделал вышеописанный код.
Итого изначальный параметр блока z-index:10; и при клике на блоке <div id="mobile-one">меню</div> z-index постоянно уменьшается на 1. (однако если поставить $(this).css('z-index') + 1, тогда z-index будет увеличиваться в 10 раз, то-есть 1, 11, 111, 1111 и т.д., что странно).

Далее буду думать, как изменить вышеописанный код так, чтобы при первом клике на <div id="mobile-one">меню</div>
z-index у блока <div id="mobile-block-one">меню</div> увеличивался на указанное значение (например на 3).
При втором нажатии уменьшался (например на 2), при третьем снова увеличивался и т.д.

[Белый шум]

эээ, вы ничего не поняли. Мой код подразумевал, что у всех блоков есть класс "mobile-blocks". В этом случае этот код уменьшит им всем (кроме блока c id="mobile-block-one") z-index на 1

[Dilettante_Pro]

(однако если поставить $(this).css('z-index') + 1, тогда z-index будет увеличиваться в 10 раз, то-есть 1, 11, 111, 1111 и т.д., что странно).

<style>
#mobile-block-one {
     position: relative;
     z-index:10;
}
</style>
<div id="mobile-block-one">A<div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#mobile-block-one').on('click', function (e) {
   $(this).css('z-index', +$(this).css('z-index') + 1);
   alert($(this).css('z-index'));
});
</script>

[LLIypuk]

Белый шум. Да извиняюсь. Сам вопрос по теме не совсем корректно звучал, так как сам запутался.
Сейчас код такой:

$(document).ready(function () {
	$('#mobile-one').on('click', function (e) {
		$('#mobile-block-one').not('#mobile-one').each(function(){
			$(this).css('z-index', +$(this).css('z-index') + 3);
			$(this).css('z-index', $(this).css('z-index') - 1);
		});
	});
});

Собственно таким образом z-index изменяется на 2.
Осталось сделать так, чтобы
$(this).css('z-index', +$(this).css('z-index') + 3);
и
$(this).css('z-index', $(this).css('z-index') - 1);
запускались не вместе, а друг за другом поочередно при каждом клике на <div id="mobile-one">меню</div>

То-есть сначала при клике <div id="mobile-one">меню</div> запускается $(this).css('z-index', +$(this).css('z-index') + 3);
Потом при следующем клике на <div id="mobile-one">меню</div> запускался $(this).css('z-index', $(this).css('z-index') - 1);
Далее снова при клике запускался $(this).css('z-index', +$(this).css('z-index') + 3);
и т.д

[LLIypuk]

Попробовал другие варианты решить задачу окончательно и... что-то не получается.
Попробовал сделать вот так:

jQuery(document).ready(function($){
	$('#mobile-one').on('click',function(){
		if($('#mobile-block-one').attr('data-click-state') == 1) {
			$('#mobile-block-one').attr('data-click-state', 0)
			$('#mobile-block-one').css('z-index', +$(this).css('z-index') + 1)
		} else {
			$('#mobile-block-one').attr('data-click-state', 1)
			$('#mobile-block-one').css('z-index', $(this).css('z-index') - 3)
		}
	});
});

Однако вот такой код работает, но не совсем так, как нужно.

jQuery(document).ready(function($){
	$('#mobile-one').on('click',function(){
		if($('#mobile-block-one').attr('data-click-state') == 1) {
			$('#mobile-block-one').attr('data-click-state', 0)
			$('#mobile-block-one').css('z-index', 1')
		} else {
			$('#mobile-block-one').attr('data-click-state', 1)
			$('#mobile-block-one').css('z-index', 4')
		}
	});
});

Такой код просто меняет значение z-index с 4 на 1 на 4 и т.д.
А задача в том, чтобы код не принимал определенное значение (например z-index: 4), а к существующему z-index прибавлял или отнимал значение свойства. То-есть к z-index: -3; прибавляет 5 (получается z-index: 2). Далее отнимает 2 (получается z-index: 0) и снова прибавляет 5 (получается z-index: 5) и т.д.
Заранее благодарю за ответ.

[Белый шум]

Создайте исходный шаблон на https://jsfiddle.net/ - дайте на него ссылку и опишите внятно задачу.

[Dilettante_Pro]

<style>
#mobile-block-one {
     position: relative;
     z-index:10;
}
</style>
<div id="mobile-one">
   <div id="mobile-block-one">A<div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
   $('#mobile-one').on('click',function(){
          var el = $('#mobile-block-one');
          if(el.attr('data-click-state') == 1) {
             el.attr('data-click-state', 0)
             el.css('z-index', +el.css('z-index') + 1)
          } else {
             el.attr('data-click-state', 1)
             el.css('z-index', +el.css('z-index') - 3)
          }
	});
});
</script>