Semantic Ui菜单无法正常工作。

Question

我正在尝试使用Semantic UI菜单进行工作。但是我无法使其工作，即当我单击菜单中的项目时，活动状态不会改变。我在网上也没有找到任何示例。

HTML代码：

<div class="ui grid">
        <div class="one wide row">
            <div class="ui green menu">
                <a class="active item">
                    <i class="home icon"></i> Home
                </a>
                <a class="item">
                    <i class="mail icon"></i> Messages
                </a>
                <div class="right menu">
                    <div class="item">
                        <div class="ui transparent icon input">
                            <input type="text" placeholder="Search...">
                            <i class="search link icon"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

JS：

$(document).ready(function() {
    $('.ui .green .menu').menu();
});

我从semantic-ui网站上取得了代码片段。

需要一些帮助。

- Priyabrata

---

如果你要给某个内容点踩，请礼貌地留下原因。 - Priyabrata

Answer 1

这里有一个类似于他们演示网站的处理程序。

演示

截图:

  $('.ui.green.menu')
    .on('click', '.item', function() {
      if(!$(this).hasClass('dropdown')) {
        $(this)
          .addClass('active')
          .siblings('.item')
            .removeClass('active');
      }
    });

- Todd

---

没问题！很高兴能帮忙。有一天你也会为我做同样的事情。 - Todd

Answer 2

使用jQuery使菜单实现动态效果，请按照以下方式操作。

来自Semantic UI示例。

$('.ui.menu .ui.dropdown').dropdown({
  on: 'hover'
});
$('.ui.menu a.item').on('click', function() {   
  $(this)
    .addClass('active')
    .siblings()
    .removeClass('active'); 
})

- Shane Davies

Answer 3

尝试：

$(document).ready(function() {
    $('.ui.green.menu').menu();
});

在同一个元素上应用了类 ui、green 和 menu。它们不是彼此的后代。

- Curtis