0

だから私はぐるぐる回っていましたが、このレイアウトの良い解決策はまだ見つかりませんでした。

私がやろうとしているのはギャラリーのようなものです。最初の親指、次にクリックした親指の下の大きな親指。

問題は、異なるイベントを分離することです。

  1. divが表示されていないクリック。（選択したdivを下にスライドします）
  2. divが表示されたクリック。（新しいdivへの移行。古いものを非表示にしてから、新しいdivか何かを表示します）
  3. すでに選択されているdivでクリックします。（選択したdivを上にスライドします）

さまざまな解決策に苦労してきましたが、グリッチがあるか、最初はクリックに反応しないことがあります。

これまでの基本構造：

<ul>
    <li id="case1">Thumb1</li>
    <li id="case2">Thumb2</li>
    <li id="case3">Thumb3</li>
</ul>

<div id="case1box">Content</div>
<div id="case2box">Content</div>
<div id="case3box">Content</div>

次に、そのスニペットを繰り返します。UL（3xLI）、次にDIV、UL（3xLI）、次にDIVであるため、より良い解決策はありますか？

トグルとそれを解決する方法について何か考えはありますか？

デフォルトの状態： デフォルト状態

クリックした場合： クリック状態

4

2 に答える 2

0

私はあなたの行動に一つずつそして擬似コードで応答します。追って通知があるまで、十分なjqueryを知っていると思います:)

divが表示されていないクリック。（選択したdivを下にスライドします）-簡単です。クラスとIDをlisに配置します。次に、トグル関数をそのクラスにバインドします。

 $(".classofli").toggle(function() {
   //get id of current li using attr('id'), parse the number, something like picture_1 or whatever
   //$("#"+idofdivtoslide).slideToggle();
 })

すでに項目1と3を処理します（すでに選択されているdivでクリックします。（選択されたdivを上にスライドします）

項目2の場合：divが表示されたクリック。（新しいdivへの移行。古いものを非表示にしてから、新しいdivか何かを表示します）

最後に選択したdivを保持する変数と、開いているdiv（画像が大きいもの）を閉じる関数があります。

var lastSelected;

//in your toggle function, check if the id of your current thing was the last you clicked, if yes, just call slideToggle. if no, close all open divs, and call slide toggle on current one.
//don't forget to set the lastSelected variable to the id of the item you clicked!

それがあなたを正しい方向に向けることを願っています

于 2011-02-16T16:08:20.123 に答える
0

レイアウトをどのように設定するかは正確にはわかりませんが、これは私たちが完成させようとしているjQueryであるため、この投稿のために重要です。私はテーブルを使用して、これをすばやくレイアウトしました。

ライブデモをチェックしてください：http ：//jsfiddle.net/pNaCH/1/

これがその一般的な概要です。重要なのは、さまざまなアイテムにクラスを追加することです。

JS

$('.thumb').click(function(){
    var id = $(this).attr('id');
    $('.large:visible').slideUp('fast');
    $('#' + id + 'box').slideDown('fast');
});

HTML

<table>
<tr><td>

    <ul>
        <li id="case1" class="thumb">Thumb1</li>
        <li id="case2" class="thumb">Thumb2</li>
        <li id="case3" class="thumb">Thumb3</li>
    </ul>

</td></tr><tr><td>    

    <div id="case1box" class="large">Content1</div>
    <div id="case2box" class="large">Content2</div>
    <div id="case3box" class="large">Content3</div>

</td></tr><tr><td>

    <ul>
        <li id="case4" class="thumb">Thumb4</li>
        <li id="case5" class="thumb">Thumb5</li>
        <li id="case6" class="thumb">Thumb6</li>
    </ul>

</td></tr><tr><td>    

    <div id="case4box" class="large">Content4</div>
    <div id="case5box" class="large">Content5</div>
    <div id="case6box" class="large">Content6</div>

</td></tr>
</table>
于 2011-02-16T16:37:56.783 に答える