Semanticui 侧边栏图标悬停不显示菜单项

Question

我试图复制我在 Rails 应用程序中找到的这个侧边栏示例，但是，图标上的悬停功能显示菜单项在我的情况下不起作用。

我只对代码做了一些小的调整，比如将一些样式移动到我的 CSS 文件中并重新排列图标。

侧边栏的 CSS

.displaynone {
  display: none !important;
}

.displayblock {
  display: block !important;
}

.sidebar .item i {
  font-size: 24px;
  margin-top: -5px !important;
}

.logo {
  height: 48px !important;
  padding: 10px !important;
}

.logo img {
  width: 100% !important;
  height: 38px !important;
}

.title.item {
  padding: .92857143em 1.14285714em !important;
}

.dropdown .menu .header {
  padding-top: 3.9px!important;
  padding-bottom: 3.9px!important;
}

.ui.sidebar.vertical.menu {
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  margin-top: 71px !important;
  overflow: auto !important;
}

侧边栏的 HTML（超薄格式）

.ui.sidebar.vertical.left.menu.overlay.visible
  .ui.accordion
    a.title.item
        | Dashboard
        i.dropdown.icon
    .content
        a.item Dashboard

    .title.item
      i.dropdown.icon 
      | Apps
    .content
      a.item Inbox
      a.item Mailbox
      a.item Chat
      a.item Contacts
      a.item Photo Editor
      a.item Calendar
      a.item Filter
      a.item Todo

    .title.item
        i.dropdown.icon
        | Layouts
    .content
        a.item Sidebar
        a.item Nav
        a.item Animated Icon
        a.item Box
        a.item Cards
        a.item Colors
        a.item Comment
        a.item Embed
        a.item Faq
        a.item Feed
        a.item Gallery
        a.item Grid
        a.item Header
        a.item Timeline
        a.item Message
        a.item Price

    a.item
      b Components

    .title.item
        i.dropdown.icon
        | UI-Kit

    .content
        a.item Accordion
        a.item Breadcrumb
        a.item Button
        a.item Divider
        a.item Dropdown
        a.item Flag
        a.item Icon
        a.item Image
        a.item Label
        a.item List
        a.item Modal
        a.item Notification
        a.item Alert
        a.item Progress
        a.item Range Semantic
        a.item Range Material
        a.item Rating
        a.item Tab
        a.item Tooltip
        a.item Transition

    .title.item
        i.dropdown.icon
        | Pages
    .content
        a.item Profile
        a.item Settings
        a.item Blank
        a.item Sign In
        a.item Sign Up
        a.item Forgot Password
        a.item Lock Me Screen
        a.item Error 404
        a.item Coming Soon

    .title.item
        i.dropdown.icon
        | Form
    .content
        a.item Form Element
        a.item Input
        a.item Form Validation
        a.item Html Editor

    .title.item
        i.dropdown.icon
        | Tables
    .content
        a.item Static Table
        a.item Datatable
        a.item Editable
    .title.item
      i.dropdown.icon
      | Chart
    .content
      a.item Charts 1
      a.item Charts 2
      a.item Charts 3

    .title.item.openbtn
        i.icon.angle.double.left
        | Collapse Sidebar

  .ui.dropdown.test.item.displaynone
    z Dashboard
    i.icon.demo-icon.heart.icon-heart

    .menu
        .header
            | Dashboard
        .ui.divider
            a.item Dashboard

  .ui.dropdown.test.item.displaynone
    z Layout
    i.icon.demo-icon.world.icon-globe

    .menu
        .header
            | Layout
        .ui.divider
        a.item Inbox
        a.item Mailbox
        a.item Chat
        a.item Contacts
        a.item Photo Editor
        a.item Calendar
        a.item Filter
        a.item Todo

  .ui.dropdown.test.item.displaynone
    z Pages
    i.icon.demo-icon.icon-params.alarm

    .menu
        .header
            | Layouts
        .ui.divider
        a.item Sidebar
        a.item Nav
        a.item Animated Icon
        a.item Box
        a.item Cards
        a.item Colors
        a.item Comment
        a.item Embed
        a.item Faq
        a.item Feed
        a.item Gallery
        a.item Grid
        a.item Header
        a.item Timeline
        a.item Message
        a.item Price

  .ui.dropdown.item.openbtn.displaynone
    z Toggle
    i.icon.demo-icon.icon-params.angle.double.right

.pusher
  header#logged-in.ui.fixed.top.inverted.menu.borderless
    = link_to image_tag('catch-all-white.png', size: '200x50', class: "ui image"), root_path, class: 'header item'
    a.item Dashboard

    .right.menu
        -if current_user
            = link_to 'Logout', destroy_user_session_path, method: :delete, class: 'item'

JS

document.addEventListener("turbolinks:load", function() {  
  $('.ui.search.dropdown').dropdown({
    clearable: true
  });
});

document.addEventListener("turbolinks:load", function(){
  $(".openbtn").on("click", function() {
    $(".ui.sidebar").toggleClass("very thin icon");
    $(".sidebar z").toggleClass("displaynone");
    $(".ui.accordion").toggleClass("displaynone");
    $(".ui.dropdown.item").toggleClass("displayblock");

    $(".logo").find('img').toggle();

  });
});

document.addEventListener("turbolinks:load", function(){
  $(".test").dropdown({
    allowCategorySelection: true,
    transition: "fade up",
    context: 'sidebar',
    on: "hover"
  });
});

document.addEventListener("turbolinks:load", function(){
  $('.ui.accordion').accordion({
    selector: {

    }
  });  
});

注意：由于我有另一个用于搜索功能特性的下拉菜单，我将.test类用于侧边栏下拉菜单，因此它们不会影响彼此的行为。 我能够通过检查元素验证，当我将鼠标悬停在侧边栏图标上时，菜单项已加载，但与上面的 codepen 示例类似，它们没有按预期显示。

Answer 1

我设法通过将 js 代码包装在$(document).ready(() => { code }并删除context: 'sidebar'使其allowCategorySelection: true ，最后我什至删除了allowCategorySelection: true所以它看起来像这样：

$(document).ready(() => {
   $(".test").dropdown({
      transition: "fade up",
      on: "hover"
  });
});