水平擴展和單獨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選擇將跟蹤對象知名度並在此基礎上你決定如何處理盒子做的狀態。