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

问题描述

我试图复制我在 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'

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 示例那样按预期显示。

标签： javascriptjqueryhtmlcss

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

问题描述

解决方案

推荐阅读