个人中心
gpt4 book ai didi

javascript - 语义 ui 下拉菜单事件项目未更新

转载 作者：行者123 更新时间：2023-12-03 01:41:08 27 4
gpt4 key购买 nike

我有一个语义 UI 水平菜单，其中一个元素是下拉项。菜单工作正常，但如果我从下拉菜单中选择某些内容，则最后一个事件项目以及下拉选择仍然保持事件状态。

即从下面的示例中选择 A、B 或 C 会使“第一”而不是“第三”处于事件状态。我认为需要一些 JavaScript 来改变这种行为(也许是 onclick？)，但我无法完全让它工作。 Screenshot of menu 

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

但我不知道如何将其放入菜单中。

最佳答案

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

关于javascript - 语义 ui 下拉菜单事件项目未更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50841183/

27 4 0
文章推荐： javascript - 了解幻想世界 `ap`
文章推荐： javascript - 运行 "setState"的 React 映射函数未更新组件
文章推荐： javascript - 如果属性不存在，如何默认为空数组 - es6
文章推荐： javascript - 回调/Promise 嵌套循环，2 个 API 调用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com