语义UI。如何初始化元素的弹出窗口？

Question

我是新的Sematic UI和jQuery，当我点击按钮“Browse1”，而不是“Browse2”或“Browse3”时，我想显示一个弹出框。

但是弹出窗口也显示当我点击我的菜单上的任何地方。我怎样才能限制弹出，等等。“Browse1”点击时，它只会显示？

为什么没有了以下工作？

$(".ui.menu").find("a:first").popup({on: 'click'}); 

这里是我的代码：

$(".ui.menu").popup({on: 'click'});

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" rel="stylesheet"/> 
 

 
<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.1.7/semantic.min.js"></script> 
 

 
<div class="ui menu"> 
 
    <a class="browse item"> 
 
     Browse1 <i class="dropdown icon"></i> 
 
    </a> 
 
    <a class="browse item"> 
 
     Browse2 <i class="dropdown icon"></i> 
 
    </a> 
 
    <a class="browse item"> 
 
     Browse3 <i class="dropdown icon"></i> 
 
    </a> 
 
</div> 
 

 
<div class="ui fluid popup bottom left transition hidden"> 
 
    <div class="ui four column relaxed equal height 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">Colored</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>

Answer 1

你需要使用（在你的情况下，第一项）分配一个弹出窗口菜单元素的语义UI方式。检查下面我写给你的脚本。

$('.ui.menu .item:first-child').popup({ 
 
    popup : $('.ui.popup'), 
 
    on : 'click' 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" rel="stylesheet"/> 
 
<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.1.7/semantic.min.js"></script> 
 

 
<div class="ui menu"> 
 
    <a class="browse item"> 
 
     Browse1 <i class="dropdown icon"></i> 
 
    </a> 
 
    <a class="browse item"> 
 
     Browse2 <i class="dropdown icon"></i> 
 
    </a> 
 
    <a class="browse item"> 
 
     Browse3 <i class="dropdown icon"></i> 
 
    </a> 
 
</div> 
 

 
<div class="ui fluid popup bottom left transition hidden"> 
 
    <div class="ui four column relaxed equal height 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">Colored</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>