Question

我在Bootsnipp上检索了一个代码，我试图改编......

我希望下拉列表中显示的菜单显示在侧边栏中怎么做？

HTML：

  <header role="banner" class="navbar navbar-default">
    <div class="container">
      <button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left">
        <i class="glyphicon glyphicon-menu-hamburger"></i>
      </button>

      <div class="side-collapse in">
        <nav role="navigation" class="navbar-collapse">
          <!-- <ul class="nav navbar-nav" >
            <li><a href="#Home">Home</a></li>
            <li><a href="#users">Users</a></li>
            <li><a href="http://placesforlove.com">Places</a></li>
          </ul> -->
          <ul class="nav navbar-nav" >
            <li class="dropdown">
              <a><span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <div class="container side-collapse-container">
    <h1>Hello</h1>
    <p>This is a side opening nav demonstration</p>
    <p>Make your browser smaller and the top menu wil become into a lateral slider menu</p>
  </div>

Javascript：

$(document).ready(function() {   
  var sideslider = $('[data-toggle=collapse-side]');
  var sel = sideslider.attr('data-target');
  var sel2 = sideslider.attr('data-target-2');
  sideslider.click(function(event){
    $(sel).toggleClass('in');
    $(sel2).toggleClass('out');
  });
});

我想要这个结果：

Answer 1

我创造了一个小提琴，希望它能帮助你click here你只需要切换课程。

$('li.dropdown').click(function() {
   $('li.dropdown').not(this).find('ul').hide();
   $(this).find('ul').toggle();
});

Answer 2

$(document).ready(function() {   
      var sideslider = $('[data-toggle=collapse-side]');
      var sel = sideslider.attr('data-target');
      var sel2 = sideslider.attr('data-target-2');
      sideslider.click(function(event){
        $(sel).toggleClass('in');
        $(sel2).toggleClass('out');
      });
    });

@media screen and (max-width: 768px) {
    .side-collapse-container{
      width:100%;
      position:relative;
      left:0;
      transition:left .4s;
    }
    .side-collapse-container.out{
      left:200px;
    }
    .dropdown-nave-block .dropdown-menu{ display: block !important;}
    .side-collapse {
      top:51px;
      bottom:0;
      left:0;
      width:200px;
      position:fixed;
      overflow:hidden;
      transition:width .4s;
      background-color: #f8f8f8;
    }
    .side-collapse a {
      border-bottom: 1px solid #e7e7e7;
    }
    .side-collapse.in {
      width:0;
    }
  }

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <header role="banner" class="navbar navbar-default">
    <div class="container">
      <button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left">
        <i class="glyphicon glyphicon-menu-hamburger"></i>
      </button>

      <div class="side-collapse in">
        <nav role="navigation" class="navbar-collapse">
     <ul class="nav navbar-nav" >
            <li><a href="#Home">Home</a></li>
            <li><a href="#users">Users</a></li>
            <li><a href="http://placesforlove.com">Places</a></li>
          </ul>
          <ul class="nav navbar-nav" >
            <li class="dropdown dropdown-nave-block open" >
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true" >Page 1
        <span class="caret"></span></a>
           
              <ul class="dropdown-menu">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <div class="container side-collapse-container">

    <h1>Hello</h1>
    <p>This is a side opening nav demonstration</p>
    <p>Make your browser smaller and the top menu wil become into a lateral slider menu</p>

  </div>

我更改了相同的html add下拉类和

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>

侧栏

2 个答案: