语义ui侧边栏实现答案

【问题标题】：Semantic ui sidebar implementation语义ui侧边栏实现
【发布时间】：2017-05-18 07:17:49
【问题描述】：

您好，我如何从语义 ui 中实现侧边栏？我想使用列表中的第一个示例。

http://semantic-ui.com/modules/sidebar.html#/definition

我尝试复制粘贴整个 div 部分并将其放在我的 html 中对于 javascript（？不太确定），

$('.left.demo.sidebar')
.sidebar('toggle')
;

我试着穿上它按钮 onclick 和函数然后使用 href 调用但是侧边栏没有显示..我做错了什么

【问题讨论】：

标签： css html button semantic-ui

【解决方案1】：

您必须在页面的<head></head> 部分中包含jQuery 库：

<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>

还有semantic.js 文件：

<script language="javascript" src="[your path here]/semantic.js"></script>

您必须从以下网站下载：

http://semantic-ui.com/

（它位于文件夹 dist 内。将该文件复制到所需位置并使用正确的路径填充 src）

<HEAD></HEAD>之间：

<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script language="javascript" src="[your path here]/semantic.js"></script>

<script type="text/javascript">

    $(document).ready(function() {
        $('.left.demo.sidebar').sidebar('toggle');
    });

</script>

【讨论】：

然后我把它放在点击中？谢谢！会尝试
我仍然无法触发它。我复制了完全相同的代码，我的代码是
不用抢那个onclick，错了，用你问题里的代码，再看我的回答，我会升级的。
.left.demo.sidebar 是侧边栏的ID，toggle 是按钮的ID？我使用github.com/Semantic-Org/Semantic-UI/issues/945 此处的示例使其工作，但我无法找到关闭它的方法。谢谢！
当侧边栏被调用时，我的切换被禁用。如果我在侧边栏添加另一个按钮，我可以关闭它，但我想让切换仍然可以点击。谢谢。

【解决方案2】：

当您将 jQuery 添加到您的项目时，您可以通过将此代码添加到您的 .js 文件来触发侧边栏：

$('.element.to.trigger.sidebar').on('click', function () {
   $('.left.demo.sidebar')
      .sidebar('toggle');
});

【讨论】：