javascript - 单击时更改另一个元素的 Z 索引

Question

在下面的代码中，我试图找出如何相对于单击的“菜单项”更改“内容”的 z-index。我设法为菜单项执行此操作，但找不到其余的解决方案。简而言之，我需要单击#m1 并为#c1 设置Z-Index 10，依此类推。

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

无需为同一元素注册多个点击事件，它们与单个绑定(bind)一样适用于您的情况。

您可以在点击事件中根据菜单索引隐藏和显示背景内容，如下所示，您可以查看代码片段以获取完整代码:

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

片段:

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

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

});

/*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>