水平扩展和单独div div divs

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> 

和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()。

UPDATE：如果你需要接近项目，如果用户在其上再次点击，您可以更改按钮.click()处理程序下面的show/hide部分。

$('#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选择将跟踪对象知名度并在此基础上你决定如何处理盒子做的状态。