toggle
[API Ref]display
は機能しますが、 CSS属性ではなくCSS属性で動作し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);
});
});