Question

我试图复制我在Rails应用程序中发现的this sidebar example，但是，在我的情况下，图标上的悬停功能无法显示菜单项。

我只对代码做了一些小调整，例如将一些样式移到我的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类，因此它们不会影响彼此的行为。我可以通过inspect元素来验证，当我将鼠标悬停在侧边栏图标上时，菜单项被加载，但是它们没有像上面的代码笔示例一样出现。

Answer 1

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

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

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

1 个答案: