Javascript按钮 - 点击后，其他按钮从后面向上滑动？

Question

我是JS和JQuery的新手，我正在尝试完成一个涉及滑动按钮的请求。 步骤进行：

1. 用户点击“展开”按钮。
2. 激活JS，向上滑动4个社交媒体按钮。用户可以单击其中一个按钮打开弹出窗口共享页面（已经设置好了）。

3. 用户可以再次点击“展开”按钮关闭此菜单。

   .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');
   }
   

这就是我们的Jade-esque标记（非常相似，只是小调整）

    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

这是按钮在LESS中的设置方式。如何定位“展开”按钮，以便在单击时，它后面的四个按钮会出现？我知道要等到文档准备就绪并且它是一个单击（function（））但这是我能够找到的。我正在使用类似Jade的语言，也使用Bootstrap。  谢谢！

编辑：想想我会包含一张图片来展示思考过程。

Answer 1

使用jQuery，您可以使用.on（）事件侦听器来检测“展开”按钮的单击，然后使用.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.