Question

我想在我的页面中实现这个语义ui的侧栏，这是我的代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<link rel="stylesheet" href="dist/semantic.min.css" />
<script type="text/javascript" src="dist/semantic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached segment pushable">
<div style="" class="ui inverted labeled icon left inline vertical sidebar menu">
  <a class="item">
  <i class="home icon"></i>
  Home
 </a>
 <a class="item">
  <i class="block layout icon"></i>
  Topics
</a>
<a class="item">
  <i class="smile icon"></i>
  Friends
</a>
<a class="item">
  <i class="calendar icon"></i>
  History
 </a>
</div>
<div class="pusher">
<div class="ui basic segment">
  <h3 class="ui header">Application Content</h3>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>
</div>
</div>
</form>
<script>
        $('.context.example .ui.sidebar')
          .sidebar({
              context: $('.context.example .bottom.segment')
          })
          .sidebar('attach events', '.context.example .menu .item')
        ;
</script>
</body>
</html>

这就是我想要的：

但是当我点击Menu时没有任何反应。你可以在这里找到我的例子：

My example which I want to implement

Answer 1

那是因为您正在搜索不存在的类。

您的Javascript代码会查找：$('.context.example .ui.sidebar')，但在您的HTML代码中，没有可用的名为.context.example的类。

因此它不起作用。如果你这样做：

<form id="form1" runat="server">
<div class="context example"> <!-- context & example class added -->
    <div class="ui top attached demo menu">
        <a class="item">
            <i class="sidebar icon"></i> Menu
        </a>
    </div>
    <div class="ui bottom attached segment pushable">
        <div style="" class="ui inverted labeled icon left inline vertical sidebar menu">
            <a class="item">
                <i class="home icon"></i> Home
            </a>
            <a class="item">
                <i class="block layout icon"></i> Topics
            </a>
            <a class="item">
                <i class="smile icon"></i> Friends
            </a>
            <a class="item">
                <i class="calendar icon"></i> History
            </a>
        </div>
        <div class="pusher">
            <div class="ui basic segment">
                <h3 class="ui header">Application Content</h3>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </div>
        </div>
    </div>
</div>
</form>

它会起作用。

如何用javascript显示语义ui侧边栏？

1 个答案: