html - onclick 分别水平展开和收缩 div

Question

我在下面有一个 jfiddle，它有两个独立和水平扩展两个 div 的链接。 http://jsfiddle.net/j9W7R/

我将如何在任何给定时间只看到一个div？假设您单击第一个，然后单击第二个，它会导致第一个收缩。或者，如果您单击第一个并再次单击第一个，它也会缩回。

这个想法是链接将是一个 Facebook 图标，下一个链接将是另一个社交媒体图标，等等等等，我将嵌入一点“喜欢我们”或与用户进行某种互动。

Answer 1

您可以通过以下方式进行操作：

为所有的滑动<div>添加一些类。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>

其中一个clicks 看起来像这样。

$('#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选择器将跟踪对象可见性的状态，并据此决定如何处理该框。