Question

我想知道你是否可以告诉我如何使用javascript在网站上显示可折叠的框？

我在网站上想要的是调整屏幕大小（例如像移动设备一样），它会用一个必须点击的下拉框替换导航栏。

这可能吗？

提前感谢所有人！

＆＃13;

#navLocation {
	position:relative;
	float: right;
	top: 55;
	right: 125;
	font-size: 155%;
}

＆＃13;

<div id="navLocation">

<a id="container" id="navLocation" href="index.html">home</a>&nbsp; <a href="about.html">about</a>&nbsp; <a href="projects.html">projects</a>&nbsp; <a href="news.html">news</a>&nbsp; <a href="contact.html">contact</a>

</div>

＆＃13;

Answer 1

这是JSFiddle

＆＃13;

   	.navbar-inverse {
    background-color: #000000;
    margin-top:10px; 
    float: right;
    border: none;
    margin-right: 10px;

    border-radius: 0px;
}


.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
    color: #FFFFFF;
    background-color: #000000;
    border: none;
}


.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
    color: #FFFFFF;
    background-color: 000000;
}



ul li{
	font-size: 20px;
}


ul li a{ 
	text-decoration: none;
	color: #000000;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2 </a></li>
            <li><a href="#">Menu 3</a></li>
          </ul>
        </div>
      </div>
    </nav>

＆＃13;

这和你想要的一样吗？

希望这会有所帮助。

Answer 2

我为你做了一个例子。请看看。

`https://jsfiddle.net/ibrahimince/yrashdfm/`

窗口。我忘了添加jquery库。您需要添加jquery库。

https://jsfiddle.net/ibrahimince/qntz5w3u/

如何让折叠框出现在较小的分辨率上

2 个答案: