Question

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

HTML w / MVC razorView

<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 为大多数id和类使用bootstrap。

    #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。首先，你必须在你的班级“项目”中创建一个“子菜单”。然后在CSS中隐藏类“子菜单”

就像你说的那样使用JQuery，你必须创建一个这样的函数：

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

它会在你点击并显示它的类“item”中找到类“子菜单”。

需要使用CSS或Jquery的垂直侧边栏子菜单

1 个答案: