javascript - 努力使用语义 UI 侧边栏

Question

我是语义 UI 的新手。我正在尝试用它创建一个简单的侧边栏，但它似乎没有响应。

这是我的代码。

HTML

<link rel="stylesheet" type="text/css" href="Semantic-UI/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="Semantic-UI/dist/components/sidebar.min.css">

<script src="Semantic-UI/dist/semantic.min.js"></script>
<script src="jquery-3.1.1.js"></script>
<script src="Semantic-UI/dist/components/sidebar.min.js"></script>


<!-- LEFT MENU -->
<div class="ui left vertical inverted sidebar menu visible">
   <a class="item">1</a>
   <a class="item">2</a>
   <a class="item">3</a>
</div>

<!-- RIGHT MENU -->
<div class="ui right vertical inverted sidebar menu">
    <a class="item">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
</div>

<div class="pusher">

    <div class="ui container">
        <!-- BODY -->
        <button id="left-sidebar-toggle">
         show sidebar
        </button>

        <button id="right-sidebar-toggle">
           show sidebar
        </button>
    </div>

 </div>

Javascript

<script type="text/javascript">
  function main() {
    $('.ui.left.sidebar').sidebar({
        dimPage: false,
        transition: 'push',
        exclusive: false,
        closable: false
    });

    $('.ui.left.sidebar')
        .sidebar('attach events', '#left-sidebar-toggle');

    $('.ui.right.sidebar').sidebar({
        dimPage: false,
        transition: 'overlay',
        exclusive: false,
        closable: false
    });

    $('.ui.right.sidebar')
        .sidebar('attach events', '#right-sidebar-toggle');
}
 $(document).ready(main);
</script

我真的不知道我做错了什么。代码看起来很完美。 任何帮助将不胜感激。

Answer 1

在我下面的代码中工作。您的代码中有一个裸脚本标记，并且您没有在任何地方引用您自己的 JS 文件。我假设这就是裸脚本标签的用途。

function main() {
    $('.ui.left.sidebar').sidebar({
        dimPage: false,
        transition: 'push',
        exclusive: false,
        closable: false
    });

    $('.ui.left.sidebar')
        .sidebar('attach events', '#left-sidebar-toggle');

    $('.ui.right.sidebar').sidebar({
        dimPage: false,
        transition: 'overlay',
        exclusive: false,
        closable: false
    });

    $('.ui.right.sidebar')
        .sidebar('attach events', '#right-sidebar-toggle');
}
$(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/components/sidebar.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/components/sidebar.css" rel="stylesheet"/>




<div class="ui left vertical inverted sidebar menu visible">
   <a class="item">1</a>
   <a class="item">2</a>
   <a class="item">3</a>
</div>

<!-- RIGHT MENU -->
<div class="ui right vertical inverted sidebar menu">
    <a class="item">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
</div>

<div class="pusher">

    <div class="ui container">
        <!-- BODY -->
        <button id="left-sidebar-toggle">
         show sidebar
        </button>

        <button id="right-sidebar-toggle">
           show sidebar
        </button>
    </div>

 </div>