Question

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

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

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

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

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

Answer 1

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

<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）

BETWEEN <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>

Answer 2

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

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

语义ui侧边栏实现

2 个答案: