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

Question

我对 JS 和 JQuery 还很陌生，我正在尝试完成一个涉及向上滑动按钮的请求。步骤：

用户点击 'Expand' 按钮。
激活JS，4个社交媒体按钮向上滑动。用户然后可以单击其中一个按钮打开一个弹出窗口来共享页面（这已经设置好了）。

用户可以再次单击 'Expand' 按钮关闭此菜单。

.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 中的按钮是这样设置的。如何定位 'Expand' 按钮，以便在单击时显示它后面的四个按钮？我知道要等到文档准备好并且它是一个 click(function()) 但这是我所能找到的。我正在使用一种类似 Jade 的语言，也使用 Bootstrap。谢谢！

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

Answer 1

使用 jQuery 您可以使用 .on() 事件侦听器来检测 'expand' 按钮的点击，然后使用 .slideToggle() 来处理共享按钮 reveal/hiding .

$('.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.

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

Javascript button - Upon click, other buttons slide up from behind it?

javascript

jquery

less

twitter-bootstrap

pug