1

私がやっているページにjQueryを実装するのに少し問題があります。

やりたいことができるようになるまでの半分くらいは進んでいますが、最後の部分については理解できません。私はしばらく jQuery のスニペットを使用してきましたが、独自のコードを作成することに関してはかなりの初心者です。

基本的には、関連するリンクをクリックしてデフォルトで非表示になっている 4 つの Div を開きたいのですが、一度に 1 つの Div のみを表示する必要があるため、Div1 が開かれている場合、Div2 ボタンをクリックすると Div1 が閉じられ、Div2 が開きます。

また、Div1 を開く Div が開いていない場合、または Div が開いている場合は、開いている Div を閉じるための 5 番目のボタンがあります。

私は助けを求めてこれらのページを見てきましたが、私が求めているものは何もありません:

http://css-tricks.com/forums/discussion/16451/.slidetoggle-one-div-a-time-problems-please-help/p1

www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

webdesignerwall.com/tutorials/jquery-tutorials-for-designers

現時点では、ボタンのクリックで Div が表示されるようにしましたが、それだけでは、これらの例のトグル ロジックをコードで動作させることはできません。

ここで JSFiddle をセットアップしました: http://jsfiddle.net/vx6qu/2/

前もって感謝します

4

4 に答える 4

1

解決策は非常に簡単です。

  • 開いているものに関係なく、すべてを閉じます
  • 必要なものだけを開く
var current = null;
var all = $(".togglediv");

function onClickOne() {
    all.hide();
    current = $("#one").show();
}
function onClickTwo() {
    all.hide();
    current = $("#two").show();
}
...

function onClickSpecial() {
    if (current) {
        all.hide();
        current = null;
    } else
        current = $("#one").show();
}
于 2012-05-23T14:14:20.117 に答える
0

あなたが探しているのは「隠された」セレクターだと思います。

if( jqueryObject.is(':hidden') ) {
    // it's hidden
} else {
    // it's not
}

これは is(':visible') でも機能します

于 2012-05-23T14:15:25.043 に答える
0 
<div id='div1' style='display:none;'>Div 1</div>
<div id='div2' style='display:none;'>Div 2</div>
<div id='div3' style='display:none;'>Div 3</div>
<div id='div4' style='display:none;'>Div 4</div>

<a href='showDiv(1);'>Show Div 1</a>
<a href='showDiv(2);'>Show Div 2</a>
<a href='showDiv(3);'>Show Div 3</a>
<a href='showDiv(4);'>Show Div 4</a>

<script>
var showDiv = function(n) {
    var i;
    for (i = 1; i < 5; i++) {
        if (i == n)
            $('#div' + i).show();
        else
            $('#div' + i).hide();
    }    
}
</script>
于 2012-05-23T14:17:04.693 に答える
0

あなたは近かったですが、よりクリーンなアプローチがあります：

http://jsfiddle.net/jbabey/vx6qu/3/

$('#toggle-image').on('click', function () {
    if ($('.toggled').length === 0) {
        // none are open, open the first
        $('.toggle-content').eq(0).slideToggle().addClass('toggled');
    } else {
        // one is open, hide it
        $('.toggled').slideToggle().removeClass('toggled');
    }
});

$('li > a').on('click', function () {
    // extract the number
    var num = parseInt(this.id.replace('toggle-', ''), 10);

    // cancel the event if they clicked the link that is already open
    if ($('.toggle-content').eq(num - 1).hasClass('toggled')) {
        return false;    
    }

    // hide the old one
    $('.toggled').slideToggle().removeClass('toggled');

    // show the new one
    $('.toggle-content').eq(num - 1).slideToggle().addClass('toggled'); 
});
于 2012-05-23T14:25:38.790 に答える