Изменение свойства z-index.
Всем привет. Есть код.
$(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, чтобы работало только когда блок начинает показываться, а не скрываться. |
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 ; |
Спасибо всем за ответы. В итоге сделал вот такой код.
$(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
|
Цитата:
<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>
|
Белый шум. Да извиняюсь. Сам вопрос по теме не совсем корректно звучал, так как сам запутался.
Сейчас код такой:
$(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); и т.д |
Попробовал другие варианты решить задачу окончательно и... что-то не получается.
Попробовал сделать вот так:
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/ - дайте на него ссылку и опишите внятно задачу.
|
<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>
|
| Часовой пояс GMT +3, время: 11:34. |