语义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

您需要使用Semantic 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>