语义 ui 下拉菜单活动项未更新答案

【问题标题】：Semantic ui dropdown menu active item not updating语义 ui 下拉菜单活动项未更新
【发布时间】：2018-06-13 15:37:54
【问题描述】：

我有一个语义 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>

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

【问题讨论】：

标签： javascript html semantic-ui

【解决方案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>

【讨论】：

这并不能解决我从下拉菜单中选择时活动标签的问题。
对于您的场景，您需要删除之前处于活动状态的类，并需要将类添加到最近单击的元素。
这很好用，只是它不会同时激活“第三”，所以当下拉菜单消失时，您不知道自己在导航中的位置。
如果我们将活动课程应用于第三个课程，那么在这种情况下，下拉菜单将被禁用。