Изменение Z-индекса другого элемента по щелчку

Question

в приведенном ниже коде. Я пытаюсь выяснить, как я могу изменить z-индекс «контента» относительно щелкнутого «элемента меню». Мне удалось сделать это для пунктов меню, но не могу найти решение для остальных. Простыми словами мне нужно щелкнуть # m1 и установить Z-Index 10 для # c1 и так далее.

HTML

<div id="content" class="container"> 
    <div id="c1" class="content">content1</div> 
    <div id="c2" class="content">content2</div> 
    <div id="c3" class="content">content3</div> 
    <div id="c4" class="content">content4</div> 
</div> 
<div id="menu" class="container"> 
    <div id="m1" class="menu-item"></div> 
    <div id="m2" class="menu-item"></div> 
    <div id="m3" class="menu-item"></div> 
    <div id="m4" class="menu-item"></div> 
</div> 

CSS

/*global*/ 
.container{ 
    position: absolute; 
    width: 300px; 
    height: 100px; 
} 
/*content*/ 
.content{ 
    position: absolute; 
    height: 100%; 
    width: 75%; 
    right: 0; 
    background: #354458; 
    text-align: center; 
    color: #fff; 
    line-height: 95px; 
} 
/*menu*/ 
.menu-item{ 
    position: absolute; 
    width: 25%; 
    height: 100%; 
    background: green; 
    cursor: pointer; 
    transition: left 200ms ease-in-out; 

} 
.menu-item.closed{ 
    left: 0 !important; 
} 
#m1{ 
    left:0; 
    background: #DB3340; 

} 
#m2{ 
    left: 25%; 
    background: #E8B71A; 
} 
#m3{ 
    left: 50%; 
    background: #1FDA9A; 
} 
#m4{ 
    left: 75%; 
    background: #28ABE3; 
} 

JQuery

$(document).ready(function(){ 
    var menu = $('.menu-item'); 

    menu.click(function(){ 
     $(this).siblings(menu).css('z-index', "initial"); 
     $(this).css('z-index', 11); 
    }); 
    menu.click(function(){ 
     menu.toggleClass("closed"); 
    }); 
}); 

Рабочий пример: http://jsfiddle.net/8a3vqy5v/

Answer 1

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

Вы можете скрыть и показать содержимое фона на основе индекса меню следующим образом в случае щелчка, вы можете проверить фрагмент кода для полного кода:

var index = $(this).index(); 
$('.content').hide(); 
$('.content').eq(index).show(); 

Snippet:

$(document).ready(function(){ 
 
\t var menu = $('.menu-item'); 
 
\t 
 
\t menu.click(function(){ 
 
\t \t $(this).siblings(menu).css('z-index', "initial"); 
 
\t \t $(this).css('z-index', 11); 
 
     menu.toggleClass("closed"); 
 

 
     var index = $(this).index(); 
 
     $('.content').hide(); 
 
     $('.content').eq(index).show(); 
 
\t }); 
 

 
});

/*global*/ 
 
.container{ 
 
    position: absolute; 
 
    width: 300px; 
 
    height: 100px; 
 
} 
 
/*content*/ 
 
.content{ 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 75%; 
 
    right: 0; 
 
    background: #354458; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 95px; 
 
} 
 

 
/*menu*/ 
 
.menu-item{ 
 
    position: absolute; 
 
    width: 25%; 
 
    height: 100%; 
 
    background: green; 
 
    cursor: pointer; 
 
    transition: left 200ms ease-in-out; 
 
    
 
} 
 
.menu-item.closed{ 
 
    left: 0 !important; 
 
} 
 
#m1{ 
 
    left:0; 
 
    background: #DB3340; 
 
    
 
} 
 
#m2{ 
 
    left: 25%; 
 
    background: #E8B71A; 
 
} 
 
#m3{ 
 
    left: 50%; 
 
    background: #1FDA9A; 
 
} 
 
#m4{ 
 
    left: 75%; 
 
    background: #28ABE3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content" class="container"> 
 
    <div id="c1" class="content">content1</div> 
 
    <div id="c2" class="content">content2</div> 
 
    <div id="c3" class="content">content3</div> 
 
    <div id="c4" class="content">content4</div> 
 
</div> 
 
<div id="menu" class="container"> 
 
    <div id="m1" class="menu-item"></div> 
 
    <div id="m2" class="menu-item"></div> 
 
    <div id="m3" class="menu-item"></div> 
 
    <div id="m4" class="menu-item"></div> 
 
</div>

Answer 2

Вы можете получить индекс нажатая .menu-item элемента, а затем выберите соответствующий элемент .content с использованием индекса с .eq() method:

Updated Example

var $menu = $('.menu-item'); 

$menu.click(function() { 
    $(this).css('z-index', 11).siblings($menu).add('.content').css('z-index', ''); 

    if (!$(this).hasClass('closed')) { 
    $('.content').eq($(this).index()).css('z-index', 10); 
    } 
    $menu.toggleClass("closed"); 
}); 

Но так как это создает странный переход ошибку, вы можете использовать код из this example вместо. Он по сути слушает событие transitionend.

Answer 3

если имеется фиксированное число элементов (т.е. 4) можно просто выбросить 4 правила, по одному для каждого из них:

$('#m1').click(function() { 
    $('.content').css('z-index', ''); 
    $('#c1').css('z-index', '11'); 
}); 
$('#m2').click(function() { 
    $('.content').css('z-index', ''); 
    $('#c2').css('z-index', '11'); 
}); 
$('#m3').click(function() { 
    $('.content').css('z-index', ''); 
    $('#c3').css('z-index', '11'); 
}); 
$('#m4').click(function() { 
    $('.content').css('z-index', ''); 
    $('#c4').css('z-index', '11'); 
}); 

если вы хотите одно правило, которое будет применяться к любому #mx - #cx пара , вы также можете попытаться получить идентификатор элемента, щелкнув его как строку, и обработать строку, чтобы заменить первую букву на «c»