2

考虑以下 HTML： 

<body>
    <div id="div1" onclick="toggleDivs();">
        div1 content
    </div>
    <div id="div2" onclick="toggleDivs();" style="visibility:hidden">
        div2 content
    </div>
</body>

我想要的是，当用户单击当前可见的 div 时，另一个 div 将变为可见，而当前 div 将变为隐藏。

我尝试使用jquery.toggle()，jquery.css("visibility":"hidden/visible")但这些技术都没有奏效。

4

3 回答 3

5

toggle[API Ref]会起作用，但它作用于displayCSS 属性，而不是visibility. 只需使用display：

<div id="div1" onclick="toggleDivs();">
    div1 content
</div>
<div id="div2" onclick="toggleDivs();" style="display: none;">
    div2 content
</div>​

和脚本：

function toggleDivs() {
    $('#div1, #div2').toggle();
}​

这是一个工作示例。

附录：

与以前的解决方案相比，我不太关心这个解决方案，但是如果根据下面的 OP 评论，您想使用 完成此任务z-index，您可以这样做：

HTML：

<div id="div1" class="cycle">
    div1 content
</div>
<div id="div2" class="cycle">
    div2 content
</div>

CSS：

.cycle {
    position: absolute; /* The important thing is that the element 
                           is taken out of the document flow */
    background: #fff;
    width: 100px;
    height: 20px;
    border: solid 1px #000;
}​

JavaScript：

$(function() {
   var cycleClick = function(e) {
        var $cycle = $('.cycle');
        $cycle.each(function() {
            var $this = $(this);
            var newZIndex = ($this.css('z-index') + 1) % $cycle.length;
            $this.css('z-index', newZIndex);
        });
        return false;
    };

    $('.cycle').click(cycleClick).each(function(idx) {
        $(this).css('z-index', idx);
    });​
});
于 2012-05-16T16:54:58.637 回答
3

这是一个有效的jsfiddle：

http://jsfiddle.net/g5chb/1/

修改后的代码如下：

<body>
    <div id="div1" >
         div1 content
    </div>
    <div id="div2" style="display:none">
         div2 content
    </div>
</body>​

和相关的jQuery：

$("div").click(function(){
  $("#div1").toggle();   
  $("#div2").toggle();                    
});
于 2012-05-16T16:55:03.963 回答
1

一个更简单的z-index解决方案是从可见 z-index 中减去 1。您只需要将 div 以相反的顺序放在页面上。

$('.cycle').click(function() {
    $(this).css('z-index', $(this).css('z-index')-1);
});
​

JSFiddle：http: //jsfiddle.net/lucuma/jr7tR/3/

于 2012-05-17T17:51:49.960 回答