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]displayは機能しますが、 CSS属性ではなくCSS属性で動作しvisibilitydisplay代わりに使用

<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 に答える