語義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>