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

您可以获取所点击的.menu-item元素的索引，然后使用带有.eq() method的索引选择相应的.content元素：

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 2

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

您可以在点击事件中根据菜单索引隐藏和显示背景内容，您可以查看完整代码的代码段：

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

代码段

＆＃13;

$(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();
	});

});

＆＃13;

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

＆＃13;

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

＆＃13;

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对的规则，您还可以尝试将该元素的id作为字符串单击并操作该字符串以便替换带有＆＃39; c＆＃39;

的第一个字母

点击更改另一个元素的Z-Index

3 个答案: