0

I have a jfiddle below that has two links that expand two divs independently and horizontally. http://jsfiddle.net/j9W7R/

How would I go about causing only one div to be seen any any given time? Say you click the first one, then click the second and it causes the first to contract. Or if you click the first and click the first again it would also retract.

The idea is that the link will be a Facebook icon, the next link will be another social media icon, etc. etc. and I will embed a little "like us" or some sort of interaction with user.

4

1 に答える 1

1

次の方法でそれを行うことができます：

すべてのスライディング<div>s にクラスを追加します。class="slickbox"例えば。

そして、それぞれが最初にすべてのボックスを非表示にしてから、必要なボックスを展開.click()することから始めます.$('.slickbox').hide();

例：

<div style="clear:both;">

  <div style="float:left;">
    <a href="#" id="slick-slidetoggle2">Slide toggle the box 2</a>
  </div>

  <div id="slickbox2" class="slickbox">
    2: This is the box that will be shown and hidden and toggled at your whim. :)
  </div>

</div>

そのうちの1 つがclick次のようになります。

$('#slick-slidetoggle2').click(function() {
    $('.slickbox').hide(); // hide all boxes (doesn't matter if they were opened or not)
    $('#slickbox2').show('slide', 400); // and open one that was clicked
    return false;
});

このようにして、開いている/閉じているアイテムごとに書き込むことなく、新しいアイテムを簡単に追加できるように拡張できます。Like Us.hide()

更新:ユーザーがアイテムを再度クリックしたときにアイテムを閉じる必要がある場合show/hideは、ボタン.click()ハンドラーのセクションを次のように変更できます。

$('#slick-slidetoggle2').click(function() {

    if ( $('#slickbox2').is(':hidden') ) { // check if current box is hidden
        $('.slickbox').hide(); // hide all boxes (doesn't matter if they were opened or not)
        $('#slickbox2').show('slide', 400); // and open this one
    } else // if it was already opened
        $('#slickbox2').hide('slide', 400); // hiding the box

    return false;
});

:hiddenセレクターはオブジェクトの可視性の状態を追跡し、これに基づいてボックスをどうするかを決定します。

于 2012-08-14T11:32:41.567 に答える