Question

我有一个语义UI水平菜单，其中一个元素是下拉项。该菜单工作正常，但如果我从下拉菜单中选择了某些内容，则最后一个处于活动状态的项目将保持活动状态，以及下拉选项。

即。从下面的例子中选择A，B或C会留下“第一个”字样。积极而不是“第三”。我认为需要一些javascript才能改变这种行为（也许是onclick？），但我无法让它发挥作用。

<html><head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
</head>
<body style="min-height: 611px;">
  <div class="ui center aligned container">
    <div id="menu-kpjwspgiojoilrelsvrv" class="ui menu ">
      <a class="item active" data-tab="tab-lwmtuiwnyoqcdotdmugl">
        <div>First</div>
      </a>
      <a class="item " data-tab="tab-rmdnlmdtoiyygingzyec">
        <div>Second</div>
      </a>
      <div class="ui pointing dropdown link item">
        <span class="text">Third</span>
        <i class="dropdown icon"></i>
        <div class="ui menu ">
          <a class="item" data-tab="tab-ygxtebqhvtdlosqlgwbh">
            <div>A</div>
          </a>
          <a class="item" data-tab="tab-fzpzmnrxwpbyveyxpgva">
            <div>B</div>
          </a>
          <a class="item" data-tab="tab-tonyqvwtiukfnvnpehyr">
            <div>C</div>
          </a>
        </div>
      </div>
      <div id="menu-kpjwspgiojoilrelsvrv" class="right menu">
        <a class="item " data-tab="tab-jgophjlxfwrpdkzribht">
          <div>Log out</div>
        </a>
      </div>
    </div>
    <div class="ui tab bottom tab segment active" data-tab="tab-lwmtuiwnyoqcdotdmugl"></div>
    <div class="ui tab bottom tab segment " data-tab="tab-rmdnlmdtoiyygingzyec"></div>
    <div class="ui tab bottom tab segment" data-tab="tab-ygxtebqhvtdlosqlgwbh"></div>
    <div class="ui tab bottom tab segment" data-tab="tab-fzpzmnrxwpbyveyxpgva"></div>
    <div class="ui tab bottom tab segment" data-tab="tab-tonyqvwtiukfnvnpehyr"></div>
    <div class="ui tab bottom tab segment " data-tab="tab-jgophjlxfwrpdkzribht"></div>
    <script>$('.ui.pointing.dropdown.link.item').dropdown({action: 'select'});</script>
</div>
</body>
</html>

上面的代码没有像预期的那样工作，因为我在R Shiny环境中开发，因此缺少在本地加载的js或样式表。

奖金问题：如何更改注销项以执行以下命令（将其发送到父iframe）：

window.top.location.href = 'https://example.com/logout'

如果是按钮，我可以这样做：

<a class='ui button' onclick ="window.top.location.href = 'https://example.com/logout';">Log out</a>

但我不确定如何将其放入菜单中。

Answer 1

您需要使用语义js代码初始化制表符元素。对于您的情况，请使用以下代码：

<script type="text/javascript">
    $('.ui .item').tab();
</script>

将初始化您的列表和下拉列表项。

更新了有效元素的代码。

<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','.dropdown .item',function(e){
        $('.ui .item').removeClass('active');
        $(this).addClass('active');
});
});
</script>

语义ui下拉菜单活动项不更新

1 个答案: