2

3つの情報パネル（IDが、、、panel-oneすべてがクラスのdiv）がpanel-twoあり、リンクをクリックするだけでスライドインおよびスライドアウトできます（これらにはID、、、すべてがクラスがあります）。他のリンクの1つがクリックされたときに、divの1つが表示されている場合は、表示されているdivを非表示にして、新しいdivを表示したいと思います。div自身のリンクがクリックされた場合、表示/非表示を切り替えたいと思います。私はこれを行うために次のコードを使用しています：panel-threeinfo-paneltoggle-onetoggle-twotoggle-threetoggle

HTML：

<ul>
    <li><a id="toggle-one" class="toggle">One</a></li>
    <li><a id="toggle-two" class="toggle">Two</a></li>
    <li><a id="toggle-three" class="toggle">Three</a></li>
</ul>

<div id="panel-one" class="info-panel"><!-- content here --></div>
<div id="panel-two" class="info-panel"><!-- content here --></div>
<div id="panel-three" class="info-panel"><!-- content here --></div>

jQuery：

$("#toggle-one").click(function () {
    if($("#panel-two").is(":visible")) {
        $("#panel-two").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    } else if($("#panel-three").css("z-index", "9997").is(":visible")) {
        $("#panel-three").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    }
    $("#panel-one").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
    return false;
});

$("#toggle-two").click(function () {
    if($("#panel-one").is(":visible")) {
        $("#panel-one").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    } else if($("#panel-three").is(":visible")) {
        $("#formlink").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    } 
    $("#panel-two").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
    return false;
});

$("#toggle-three").click(function () {
    if($("#panel-one").is(":visible")) {
        $("#panel-one").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    }  else if($("#panel-two").is(":visible")) {
        $("#panel-two").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    }
    $("#panel-three").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
    return false;
});

それは機能しますが、非常に冗長であり、拡張性も高くありません。3divの情報を管理することは問題ありませんが、さらに追加するときが来ると、維持するのが非常に困難になります。「 Jqueryで複数のDivを表示/非表示」で概説されているようなアプローチを使用してみましたが、正しく機能しないようです-トグルと非表示の動作がうまく機能しません（非表示のダイビングショーが必要なときに表示されます）その後、すぐに非表示にします）。同様に、3divのJqueryトグルで示されている例も機能しないようです。

これを行うにはもっとクリーンな方法があると確信していますが、私はjQueryとjavascript n00bに少し慣れているので、それを整理する方法がわかりません。これに取り組むための最良の方法は何ですか？

4

3 に答える 3

5

パネルをので<div>包みidますpanels：

<div id="panels">
  <div class="info-panel"><!-- content here --></div>
  <div class="info-panel"><!-- content here --></div>
  <div class="info-panel"><!-- content here --></div>
</div>

そしてこれはうまくいくはずです：

$(".toggle").on('click', function() {
    var $panel = $('#panels').children().eq($(this).parent().index());

    $panel.toggle("slide", {direction: 'up'}, 750);
    $panel.siblings().hide("slide", {direction: 'up'}, 750);

    return false;
});
于 2012-06-18T00:46:07.967 に答える
2

Blenderが投稿したものから舵を取って、私はこれで行くことになりました：

HTML：

<div id="togglelinks">
    <ul>
        <li><a class="toggle" href="#panel-one">One</a></li>
        <li><a class="toggle" href="#panel-two">Two</a></li>
        <li><a class="toggle" href="#panel-three">Three</a></li>
    </ul>
</div>

<div id="panels">
    <div id="panel-one" class="info-panel"><!-- content here --></div>
    <div id="panel-two" class="info-panel"><!-- content here --></div>
    <div id="panel-three" class="info-panel"><!-- content here --></div>
</div>

jQuery：

$(".toggle").click(function() {
    var $toggled = $(this).attr('href');

    $($toggled).siblings(':visible').hide("slide", {direction: 'up'}, 750);
    $($toggled).toggle("slide", {direction: 'up'}, 750);

    return false;
});

それに満足しています...27行のjavascriptから6行まで、すべてが機能しているようです。しかし、繰り返しになりますが、Blenderのおかげです。そうしなければ、この時点に到達することはなかったでしょう。

于 2012-06-18T12:08:00.630 に答える
1

それは私がそれをする方法です：

$("info-panel").click(function(){

    //put your div in memory
    var chosen = $(this);

    //Slide down all the toggle div or hide them
    $('.info-panel').slideUp('slow', function(){);

    //open the div you wanted
    chosen.slideToggle('slow',function(){});
}

次に、それをアクティブにするには：

function openDiv(divId){
$("#"+divId).click();
}

HTMLで、a href = "＃"の後に...onclick属性を設定します

a href="#" onclick="openDiv('panel-one')"
于 2012-06-18T01:32:23.857 に答える