体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

请问老师那里有问题？

来源：2-7 作业题

hy_wang

2018-06-26 19:56:34

请问一下老师下边这个代码我不知道该应该实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="bs.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <nav class="navbar navbar-default">
   <div class="container">
   <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <!-- imooc商标 -->
    <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">IMOOC</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <!-- 导航栏左边样式 -->
      <ul class="nav navbar-nav navbar-left">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">首页 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">婚礼<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">专用 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">商铺 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <!-- 导航栏右边样式 -->
      <ul class="nav navbar-nav navbar-right">
        <li id="nav-right-one">
         <a href="#"><i class="fa fa-search"></i><span class="caret triangle one"></span></a>
        </li>
         <li id="nav-right-two"><a href="#"><i class="fa fa-user"></i><span class="caret triangle two"></span></a></li>
         <li id="nav-right-three"><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i><span class="caret triangle three"></span></a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</div>
</nav>
   <!-- 导航栏右边的表单 -->
    <div class="right-one">
<form>
   <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
   </div>
   <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
   </div>
   <button type="submit" class="btn btn-warning">Submit</button>
    <div class="checkbox">
      <label>
        <input type="checkbox">记住
      </label>
   </div>
</form>
<P>新用户？<a href="#">注册| </a><a href="#">忘记密码?</a></P>
</div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="one.js"></script>
  </body>
</html>
/*导航栏样式*/
/*导航栏背景颜色*/
.navbar{
	background: #5D4B33;
	margin-bottom: 0;
}
/*导航链接被停放时候的颜色*/
.navbar .container .container-fluid .collapse .navbar-nav li a:hover{
	background: #F07818;
}
/*默认激活‘首页’*/
.navbar-default .navbar-nav>li>a.active{
	background: #F07818;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
	background: #F07818;
}
/*改变导航的字体颜色*/
.navbar-default .navbar-nav>li>a,navbar-default .navbar-brand:hover,.navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li>a,navbar-default a:focus{
	color: #fff;
}
/*改变imooc的字体颜色*/
.navbar-default .navbar-brand,.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus{
	color: #fff;
	line-height: 1;
	font-size: 25px;
}
/*导航的间距*/
.navbar-left>li{
	margin: 0 20px;
}
/*右侧导航样式*/
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{
	color: #fff;
}
.right-one{
	display: none;
	position: fixed;
	right: 14%;
	width: 250px;height: 250px;
}
.right-one p{
	text-align: center;
}
.navbar-right .navbar-nav>li{
	position: relative;
}
/*小三角样式*/
.triangle{
	display: none;
	transform: rotate(180deg);
	position: absolute;
	left: 35%;
	bottom:0;

}

/*手机响应式*/
@media (max-width: 768px){
	.right-one{
		display: none;
	}
}
}
$(function () {
	// 启动弹出框函数
  $('[data-toggle="popover"]').popover();
  // 获取导航栏右侧的是三个图片
  var nav_right_one=$('#nav-right-one'),
  	nav_right_two=$('#nav-right-two'),
  	nav_right_three=$('#nav-right-one');
  // 获取input和三角
  var one_input=$('.right-one'),
  	  caret_one=$('.one'),
  	  caret_two=$('.two'),
  	  caret_three=$('.three');
  	  // 鼠标单击图标的时候显示表单
  nav_right_one.on('click',function(){
  	one_input.css('display','block');
  	caret_one.css('display','block');
  })
  		// 鼠标移出图标的时候表单隐藏
  nav_right_one.on('mouseout',function(){
  	one_input.css('display','none');
  	caret_one.css('display','none');
  })
       // 鼠标移入表单的时候表单显示
   one_input.on('mouseover',function(){
  	one_input.css('display','block');
  	caret_one.css('display','block');
  })
   		// 鼠标移出表单时候表单隐  
   one_input.on('mouseout',function(){
  	one_input.css('display','none');
  	caret_one.css('display','none');
  })
})

老师我想实现鼠标在移出nav_right_one和nav-right-one时才让底下的表单隐藏。请问一下老师为什么这个代码没有实现？在nav_right_one这个li中移动（明明我还没有移出图标  底下的div还是会隐藏），one_input还是会隐藏？？请问一下那里有问题 应该如何实现？

写回答

3回答

小于飞飞

2018-07-02

按照建议方法，在下面添加灰色区块内容，经过测试，正常显示，导航 nav 高度没有变化：

http://img.mukewang.com/climg/5b398eea00010b5f14120704.jpg

如描述不是该效果，请详细描述，以便更好帮助解决问题，祝学习愉快。


0

小于飞飞

2018-06-29

根据新提问问题，可以使用hover 来实现：

1. 调整html结构

http://img.mukewang.com/climg/5b35c99e00013aba07180092.jpg

2. 设置经过样式 

http://img.mukewang.com/climg/5b35c9f20001377602990065.jpg

动手实践，希望解答你的疑惑，祝学习愉快。

0
hy_wang
h 请问如何解决这个问题
h018-07-01
共2条回复

小于飞飞

2018-06-27

指的是出现下拉的表单效果吧，如下：

http://img.mukewang.com/climg/5b32ed2c0001259403950345.jpg

如是想实现点击出现下拉表单，当移出下拉菜单时，才隐藏，代码分析如下：

因为 当离开nav_right_one 要进入下拉表单时， nav_right_one触发了mouseout，所以表单已经隐藏了，没有办法移入，然后离开在隐藏。建议修改如下：

http://img.mukewang.com/climg/5b32f0120001be6904680391.jpg

动手实践，希望解答你的疑惑，欢迎采纳，祝学习愉快。



0
hy_wang
h 以及老师请问我把这个click点击事件换成mouseover事件我测试代码，明明我还没有完全移出这个li 底下div的样式就变成了display none请问这是怎么回事？？？我测试了一下午找不到问题所在
h018-06-27
共3条回复

0 学习 · 5012 问题

查看课程

相似问题

两个问题：线溢出了怎么弄？ 缩放成小方块还是有问题？

回答 5

bootstrap问题

回答 2

作业--下拉菜单问题

回答 1

怎么实现下拉？还有一些问题，老师帮忙看看

回答 1

关于继承宽度的问题？

回答 3

打开慕课网App查看更多内容