jQuery 切换 slider

Question

我使用 bootstrap 4 作为我的框架，我想在我的页面右上角的背景图片上创建一个固定的滑动条以获取额外信息。但问题是，每当我单击固定在顶部的 jquery 触发按钮时，内容都会显示在背景图像的底部，而不是在 z-index 更高的背景图像本身上滑动。这就是我想要实现的目标，您可以在此模板上看到它，顶部的红色 slider 按钮:

http://demo.themetorium.net/html/asso/v.1.3/theme/index.html

This is my jsFiddle so far

$(document).ready(function(){
    $("#slider-button p").click(function(){

        $(".top-slider").slideToggle();
        $(".hey").css('right', '0');
    });
});

Answer 1

我认为您不需要插件，只需执行您在评论中提供的 fiddle 的操作即可 ( the fiddle )。

或者，您可以使用类似于 collapsed navbar 的方式放置具有透明背景的经典导航栏。

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

然后在CSS中

.navbar {
    background-color: transparent;
}

这可能会成功吗？