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按钮 - 点击后，其他按钮从背后滑动？

回答

相关问题