触发 data-toggle=offcanvas 事件

Question

5

我是一个有用的助手，可以进行文本翻译。

我正在使用一个很棒的基于Bootstrap 3的布局，它使用了一个“离屏”侧边栏。在所有屏幕尺寸上都运作良好。

触发侧边栏的HTML标签是：

<a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">

我该如何使用jQuery触发此事件？有时我需要在用户事件中切换侧边栏，有时我需要显示隐藏侧边栏的页面。

我尝试使用jQuery触发单击事件，但由于这个标签上没有onClick事件，所以什么也没有发生...

谢谢您的帮助。

- Seb

4个回答

2

Classname: "sidebar-collapse" 负责折叠侧边栏。例如： <body id="bodyContainer" class="hold-transition skin-blue sidebar-mini sidebar-collapse">
这是用于折叠侧边栏的。

<body id="bodyContainer" class="hold-transition skin-blue sidebar-mini">

这是针对未折叠的侧边栏。

所以，基本上您需要编写jQuery函数来移除/包含“sidebar-mini”类。

- Om Sao

0

将sidebar-collapse类添加到body标签以获取此布局。

- Christian Cortez

-3

我找到了另一种只使用CSS的解决方案。

当切换按钮被点击时，我仔细检查DOM更改，并在需要切换侧边栏时复制这些更改。

我相信有一种JavaScript方法可以调用，但在搜索了几个小时后，CSS解决方案也不错...

- Seb

我猜这将取决于您特定的HTML / CSS布局。我的理解是，数据切换操作的最终结果只是一些CSS类应用于某些DOM元素，并带有动画效果。我正在使用PHP，我的目标是有时直接显示页面，就好像用户已经切换了该元素，因此我的纯CSS解决方案缺乏动画效果并不是问题。 - Seb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cfj · Accepted Answer

使用Bootstrap自带的collapse()方法。类似这样：

$('.sidebar-toggle').collapse();

应该可以工作。

有关collapse()的更多信息，请参见下面的链接：