Question

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link type="text/css" href="css/bootstrap.css" rel="stylesheet">
        <link type="text/javascript" href="js/bootstrap.js">
        <script src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <style>



            @media screen and (max-width: 600px) {

             ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #fff; width: 100%}
  li ul {display: none;}
  ul li a {display: block;background: #808080;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff; width: 100%}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;width: 100%;z-index: 1}
  li:hover li {float: none; }
  li:hover a {background: #0026ff;}
  li:hover li a:hover {background: #4800ff;}
  #drop-nav li ul li {border-top: 0px;}
 #s{float: left;position: relative;width: 100%}
            }
        </style>

    </head>
    <body>
        <div  style="float: left"  id="s">
     <ul id="drop-nav">
    <li><a href="#">Content Management1<span class="glyphicon glyphicon-plus" ></span></a>
    <ul>
    <li><a href="#">Joomla</a></li>
    <li><a href="#">Drupal</a></li>
    <li><a href="#">WordPress</a></li>
    <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
 </ul>
 </div>

        <div  style="float: right" id="s">        <ul id="drop-nav">
        <li><a href="#">Content Management2<span class="glyphicon glyphicon-plus"></span></a>
    <ul>
    <li><a href="#">Joomla</a></li>
    <li><a href="#">Drupal</a></li>
    <li><a href="#">WordPress</a></li>
    <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
 </ul></div>

        <div  style="float: right;position: relative" id="s">      <ul id="drop-nav">
        <li><a href="#">Content Management3<span class="glyphicon glyphicon-plus" ></span></a>
    <ul>
    <li><a href="#">Joomla</a></li>
    <li><a href="#">Drupal</a></li>
    <li><a href="#">WordPress</a></li>
    <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
 </ul></div>
        <br><br><br><br>


</div>
    </body>
</html>

我希望将此列表转换为下拉菜单，然后单击它，我尝试了这个逻辑并搜索了引导类没有找到任何内容。我希望它像引导程序的导航栏一样工作，因为当屏幕分辨率低并且工作时点击它会转换为下拉菜单。

Answer 1

首先阅读Difference between id and class可能是因为您的代码无效。我只是在你的代码中使用bootstrap collapse它对我来说工作正常我只需用类更改id和一些css就可以将你的代码与它进行比较。

  ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
  }
  ul li {
    display: block;
    position: relative;
    float: left;
    border: 1px solid #fff;
    width: 100%
  }
  li ul {
    display: none;
    width: 100%;
    z-index: 1
  }
  ul li a {
    display: block;
    background: #808080;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    width: 100%
  }
  ul li a:hover {
    background: #f00;
  }
  li:hover li {
    float: none;
  }
  li:hover a {
    background: #0026ff;
  }
  li:hover li a:hover {
    background: #4800ff;
  }
  .drop-nav li ul li {
    border-top: 0px;
  }
  .s {
    position: relative;
    width: 100%
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="s">
  <ul class="drop-nav">
    <li><a data-toggle="collapse" href="#test1" aria-expanded="false" aria-controls="collapseExample">Content Management1<span class="glyphicon glyphicon-plus" ></span></a>
      <ul id="test1" class="collapse">
        <li><a href="#">Joomla</a></li>
        <li><a href="#">Drupal</a></li>
        <li><a href="#">WordPress</a></li>
        <li><a href="#">Concrete 5</a></li>
      </ul>
    </li>
  </ul>
</div>

<div class="s">
  <ul class="drop-nav">
    <li><a data-toggle="collapse" href="#test2" aria-expanded="false" aria-controls="collapseExample">Content Management2<span class="glyphicon glyphicon-plus"></span></a>
      <ul id="test2" class="collapse">
        <li><a href="#">Joomla</a></li>
        <li><a href="#">Drupal</a></li>
        <li><a href="#">WordPress</a></li>
        <li><a href="#">Concrete 5</a></li>
      </ul>
    </li>
  </ul>
</div>

<div class="s">
  <ul class="drop-nav">
    <li><a data-toggle="collapse" href="#test3" aria-expanded="false" aria-controls="collapseExample">Content Management3<span class="glyphicon glyphicon-plus" ></span></a>
      <ul id="test3" class="collapse">
        <li><a href="#">Joomla</a></li>
        <li><a href="#">Drupal</a></li>
        <li><a href="#">WordPress</a></li>
        <li><a href="#">Concrete 5</a></li>
      </ul>
    </li>
  </ul>
</div>
<br>
<br>
<br>
<br>

如何在屏幕分辨率较低时创建下拉菜单？

1 个答案: