and

and

关注
发信
Android 动画中的 java.util.ConcurrentModificationException
在WinAPI线程之间的共享变量中使用volatile
什么是具有非平凡实现的getter？
为什么在gcc中需要-rdynamic选项？
ImageMagick单次调用中的多个操作
如何使用CLion更改目录，库目录和库
React Native Android 启动画面
在Mac OS X 10.5.8上安装Java 6之后，Java版本显示为1.5
在Android ADB Shell中运行Shell脚本
无法在Windows 7上为Appcelerator Studio安装Android SDK
什么是eclipse中的星图标的方法？
如何使Brew通过+ clipboard安装Vim?
如何旋转Pandas DataFrame列以创建二进制“值表"?
在CLion中设置构建目标
红色bg +黑色字段，不透明度为85 =粉红色文字

可折叠的引导程序导航栏

扫码查看
本文介绍了可折叠的引导程序导航栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的可折叠导航栏有问题.当我单击按钮时，它显示可折叠按钮但不显示li".演示

这是代码

<头><title>导航栏折叠</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><script type="text/javascript" href="jquery/jquery-1.12.2.min.js"></script><script type="text/javascript" href="js/bootstrap.min.js"></script><身体><div class="navbar navbar-inverse"><div class="容器"><a href="#" class="navbar-brand">MyWebsite</a><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><div class="collapse navbar-collapse" id="mynavbar"><ul class="nav navbar-nav navbar-left" ><li><a href="">首页</a></li><li><a href="">关于</a></li><li><a href="">contact</a></li><li><a href="">search</a></li>

</html>

解决方案

你的代码没问题.我在问题中采用了相同的代码并使其工作.唯一的变化是我指出了要从云中读取的引用.所以我确信唯一的问题可能是你引用的文件包括 bootstrap.min.js 和你的 jquery.检查您的控制台窗口，看看加载这些文件是否有任何错误.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><div class="navbar navbar-inverse"><div class="容器"><a href="#" class="navbar-brand">MyWebsite</a><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><div class="collapse navbar-collapse" id="mynavbar"><ul class="nav navbar-nav navbar-left"><li><a href="">首页</a><li><a href="">about</a><li><a href="">contact</a><li><a href="">search</a>

I have problem with my collapsible navbar. It shows collapsible button but not "li" when i click on button.Demo

Here is code

<!DOCTYPE html>
<html>
<head>
	<title>Navbar Collapse</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" href="jquery/jquery-1.12.2.min.js"></script>
	<script type="text/javascript" href="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="navbar navbar-inverse">
		<div class="container">
				<a href="#" class="navbar-brand">MyWebsite</a>
				<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 class="collapse navbar-collapse" id="mynavbar">
				<ul class="nav navbar-nav navbar-left" >
					<li><a href="">Home</a></li>
					<li><a href="">about</a></li>
					<li><a href="">contact</a></li>
					<li><a href="">search</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

解决方案

You code is all fine. I took the same code in the question and got it working. The only change is I pointed the references to be read from cloud. So I am sure The only problem might be the files you are referencing for including bootstrap.min.js and your jquery. Check your console window to see if there was any error loading these files.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="navbar navbar-inverse">
  <div class="container">
    <a href="#" class="navbar-brand">MyWebsite</a>
    <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 class="collapse navbar-collapse" id="mynavbar">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="">Home</a>
        </li>
        <li><a href="">about</a>
        </li>
        <li><a href="">contact</a>
        </li>
        <li><a href="">search</a>
        </li>
      </ul>
    </div>
  </div>
</div>

这篇关于可折叠的引导程序导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-04 03:43
查看更多
Powered by LMLPHP ©2025 and 0.039035