javascript - 努力使用语义UI边栏

我是语义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>

Java脚本

<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

我真的不能说出我在做什么错。该代码似乎很完美。
任何帮助，将不胜感激。

最佳答案

在下面的代码中工作。您的代码中有一个裸脚本标记，并且您没有在任何地方引用您自己的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>

关于javascript - 努力使用语义UI边栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41122728/