Question

这是一个来自semantic-ui的简单dropdpwn弹出式示例，但无法正常工作：

<head runat="server">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/site.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<title><%: Page.Title %></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
    <div class="example">
        <div class="ui menu">
<a class="browse item" style="">
Browse
<i class="dropdown icon"></i>
</a>
<div class="ui fluid popup top left transition hidden" style="top: auto; left: 1px; bottom: 69px; right: auto; width: 653px;">
<div class="ui four column relaxed divided grid">
  <div class="column">
    <h4 class="ui header">Fabrics</h4>
    <div class="ui link list">
      <a class="item">Cashmere</a>
      <a class="item">Linen</a>
      <a class="item">Cotton</a>
      <a class="item">Viscose</a>
    </div>
  </div>
  <div class="column">
    <h4 class="ui header">Size</h4>
    <div class="ui link list">
      <a class="item">Small</a>
      <a class="item">Medium</a>
      <a class="item">Large</a>
      <a class="item">Plus Sizes</a>
    </div>
  </div>
  <div class="column">
    <h4 class="ui header">Colors</h4>
    <div class="ui link list">
      <a class="item">Neutrals</a>
      <a class="item">Brights</a>
      <a class="item">Pastels</a>
    </div>
  </div>
  <div class="column">
    <h4 class="ui header">Types</h4>
    <div class="ui link list">
      <a class="item">Knitwear</a>
      <a class="item">Outerwear</a>
      <a class="item">Pants</a>
      <a class="item">Shoes</a>
    </div>
  </div>
</div>
</div>
<a class="item">
 <i class="cart icon"></i>
  Checkout
 </a>
 </div>
    </div>



    <div id="web_content">
    </div>

    <div id="web_footer">
    </div>
</form>


<script type="text/javascript">
    $('.example .menu .browse').popup({
        inline: true,
        hoverable: true,
        position: 'bottom left',
        delay: {
            show: 300,
            hide: 800
        }
    });
</script>

</body>

当我点击/悬停在浏览时没有任何反应。我对jquery选择器的了解不够充分。谢谢你的阅读。

语义ui弹出窗口不起作用

0 个答案: