tabs - 从页面内滑出面板

Question

我在将各种滑动面板插件应用到页面中的 div 时遇到问题。因此，不是从浏览器窗口的顶部、侧面或底部，而是从页面内的某个位置。

这会工作...

$("div").click(function () {
      $(this).hide("slide", { direction: "down" }, 1000);
});

但是 div 滑出视图，因此没有可以单击的选项卡将其向上滑动。

我可以使用单独的元素来启动点击功能，但我需要可点击元素充当连接到滑动 div 的选项卡。

因此，当页面加载时，您会在屏幕中间看到一个面板，该面板底部会伸出一个小标签。单击选项卡时，它会与带有附加信息的面板一起向上滑动。再次单击选项卡时，它会向下滑动。

任何帮助表示赞赏。

Answer 1

您需要在其旁边添加另一个 div 以用作切换选项卡，该选项卡不会被隐藏。让该选项卡隐藏/显示您想要隐藏的 div。

$("#tab").click(function () {
    $("#slider").slideToggle("slow");
});

看到这个小提琴：http: //jsfiddle.net/Jxbkj/