努力使用语义UI边栏

Question

I'm new to semantic UI. I'm trying to create a simple sidebar with it but it doesn't seem to respond.

Here's my code.

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

I can't really tell what I'm doing wrong here. The code seems perfect. Any help would be appreciated.

Answer 1

Works in the code I have below. You have a naked script tag in your code and you haven't referenced your own JS file anywhere. I assume thats what the naked script tag was for.

 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>