需要带有 CSS 或 Jquery 的垂直侧边栏的子菜单

Question

我在我的 MVC 视图中创建了一个边栏。侧边栏的基本布局是使用 Bootstrap 完成的 3. 我还创建了一些自定义样式文件。我能够弄清楚如何格式化侧边栏并获得我想要的功能。我无法再为此 post 添加答案（感谢 Whosebug！），因此我将 post 我在这个原始问题部分中使用的解决方案。

HTML w/MVCrazorView

<div id="sidebar-nav" class="hidden-xs">
        <ul id="dashboard-menu" class="nav nav-list">
            <li class="nav-divider"></li>
            <li class="dropdown dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 1<b class="fa fa-caret-right"></b></a>
                <ul id="sidebar-nav-ext" class="dropdown-menu" style="margin-left:190px; padding-left:2px">
                    <li>SubMenu Item 1</li>
                    <li>SubMenu Item 2</li>
                    <li>SubMenu Item 3</li>
                </ul>
                </li>
            </ul>
        </div>

JQuery

(function ($) {
    $(document).ready(function () {
        $('ul.dropdown-menu-right [data-toggle=dropdown]').on('click', function (event) {
            event.preventDefault();
            event.stopPropagation();
            $(this).parent().siblings().removeClass('open');
            $(this).parent().toggleClass('open');
        });
    });
})(jQuery);

CSS 使用 bootstrap 作为您的大部分 ID 和类。

    #sidebar-nav-ext {
      position: absolute;
      top: 100%;
      width: 75px;
      margin-left: 65px;
      height: 2000%;
      border: 2px solid;
      border-color: lightgray;
      padding-top: 2px;
      padding-left: 5px;
      background-color: #ffffcc;
      padding: 5px 0;
    }

    #sidebar-nav {
      position: absolute;
      width: 65px;
      float: left;
      margin: 0em;
      margin-left: 0em;
      height: inherit;
      border: 2px solid;
      border-color: lightgray;
      padding-top: 2px;
      padding-left: 5px;
      background-color: #ffffcc;
    }

@media (min-width: 1200px) {
  #sidebar-nav {
    width: 200px;
  }
  #sidebar-nav li a span {
    display: inline !important;
  }
}
#sidebar-nav .nav-list {
  padding: 0px;
}
#sidebar-nav .nav-list li {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
#sidebar-nav .nav-list li.active {
  background: #f3f3f5;
  border-right: 0px;
  border-top: 1px solid #cfcfd6;
  border-bottom: 1px solid #cfcfd6;
}
#sidebar-nav .nav-list li a,
#sidebar-nav .nav-list li a:hover {
  color: #585868;
  text-shadow: 1px 1px 0px #fff;
  padding: .5em 2em;
  border: 0px;
  margin: 0px 1px;
  background: none;
}
#sidebar-nav .nav-list li.active a {
  border: 0px;
}
#sidebar-nav .nav-list li:hover {
  background: #e8e8eb;
}

/*Sidebar Dropdown Menu*/
.dropdown-menu>li
{   position:relative;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:pointer;
}
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: 10px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left-color:#fff;
    box-shadow:none;

Answer 1

如果你想让它在点击后出现，是的，你必须使用 Javascript。首先，你必须在你的 class "item" 中创建一个 class "submenu"。然后隐藏在CSS中class"submenu"

像你说的JQuery，你必须做一个这样的函数：

$('.item').click(function() {
   $(this).find('.submenu').show();
});

它将在您点击的 class "item" 中找到 class "submenu" 并显示它。

需要带有 CSS 或 Jquery 的垂直侧边栏的子菜单

Need sub-menu for vertical sidebar with CSS or Jquery

css

jquery

twitter-bootstrap-3