Javascript按鈕 - 點擊後，其他按鈕從背後滑動？

我對JS和JQuery非常陌生，我試圖完成一個涉及向上滑動的按鈕的請求。步驟：Javascript按鈕 - 點擊後，其他按鈕從背後滑動？

用戶單擊'展開'按鈕。
激活JS，4個社交媒體按鈕向上滑動。用戶可以點擊其中一個按鈕打開彈出窗口來共享頁面（這已經設置好了）。

用戶可以通過再次點擊'展開'按鈕關閉此菜單。

.share-button-group { 
    position: fixed; 
    bottom: 60px; 
    right: 30px; 
    z-index: 999; 

    a + a { 
     margin-top: @padding-small-horizontal; 
    } 
} 

.share-button-expand { 
    .share-button-variant(@gray-light, '\f1e0'); 
} 

.share-button-facebook { 
    .share-button-variant(#3b5998, '\f09a'); 
}

這裏，它是在我們的翡翠式的標記（極其相似，只是小調整）

if share 
     .share-button-group 
     a.share-button-facebook(data-share="facebook") 
      span.sr-only Share on Facebook 
     a.share-button-expand(data-share="expand") 
      span.sr-only Share

這是兩個按鈕的設置在更短。我如何定位「展開」按鈕，以便點擊後，它後面的四個按鈕將出現？我知道要等到文檔準備就緒，並且它是一個點擊（函數（）），但是就我所能找到的那樣。我正在用類似Jade的語言工作，並使用Bootstrap。謝謝！

編輯：我想包括一個圖像來顯示思維過程。

Sorry it's so horrible, I'm super exhausted as well.

來源

2015-04-20 sugarPhlox

使用jQuery你可以使用。對（）事件偵聽器檢測到「擴大」按鈕的點擊，然後使用.slideToggle（）來處理的分享按鈕顯示/隱藏。

$('.expandBtn').on("click", function() { 
 
    $('.shareItems').slideToggle("slow", function() { 
 
    // Animation complete. 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="shareItems" style="display:none;"> 
 
    <a href="">Facebook</a> 
 
    <a href="">Twitter</a> 
 
</div> 
 
<div class="expandBtn"> 
 
    <a href="javascript:;">Expand</a> 
 
</div>

See this fiddle.

來源

2015-04-20 22:14:27 brett

我完全忘了，包括圖像，而是將這項工作，如果我想每個鏈接的目標？我現在有一個關於這個問題的圖像。 – sugarPhlox

是的，絕對。只需將圖像放置在A標籤內（替換文字）即可。 – brett

查看此更新使用圖像的小提琴：https：//jsfiddle.net/wrmn16uo/2/ 沒有太大的變化。如果它適合您，請務必檢查此答案爲已接受。乾杯。 – brett

Javascript按鈕 - 點擊後，其他按鈕從背後滑動？

回答

相關問題