我尝试过使用position：relatives / position：absolute等来实现某种期望的结果,但没有这样的运气.我已经看到了与此问题相关的其他类似问题,但它仍然没有帮助我.
任何帮助解决这个问题将不胜感激.
HTML
<body> <nav > <div > <div > <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span >Toggle Navigation</span> <span ></span> <span ></span> <span ></span> </button> <a href="#"> </a> </div> <div ID="bs-example-navbar-collapse-1"> <ul ID="nav"> <li ><a href="#">link</a></li> <li ><a href="#">link</a></li> <li ><a href="#">link</a></li> <li > <a href="#" data-toggle="dropdown" ID="menu-trigger">Drop-Down Menu<i ></i></a> <ul ID="menu"> <li > <a href="#" ><i ></i>Option</a> </li> <li > <a href="" ><i ></i>Option</a> </li> </ul> </li> <li ><a href="#">link</a></li> <li ><a href="#">link</a></li> </ul> </div> </div></nav><div ></div>
CSS
body { margin: 0; padding: 0; Font-family: "Helvetica","Arial",sans-serif; Font-weight: 500; Font-style: normal; Font-size: 12px; line-height: 1.5; } .navbar-default { background-color: #ffffff; } .navbar { min-height: 65px; padding-top: 5px; margin-bottom: 0px; border-bottom: solID 2px #eee; } .navbar-header { margin-top: -12px; } .navbar-brand { padding-top: 0px !important; } /* for button placement*/ .navbar-toggle { margin-top: 26px; } /*for collapsed navbar*/ .navbar-collapse { margin-top: 12px; } .site-logo { max-wIDth: 135px; min-wIDth: 120px; } .navbar-default .navbar-nav > li > a { text-transform: uppercase; background-color: #ffffff !important; color: #333333; } .navbar-default .navbar-nav > li > a:hover { color: #3381d0; } .navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover { background-color: #ffffff; border-bottom: 2px solID #ff5d1c; color: #ff5d1c; bottom: -2px; } .nav>li { position: static !important; } /* For navbar dropdown*/ .navbar .dropdown-menu { min-wIDth:1349px; wIDth: 100%; height: 120px; margin-top: 51px; z-index:1; left: 0; text-align: center; padding-right:10px; position: absolute; List-style-type:none; border-top: 2px solID #ff5d1c; border-bottom: 2px solID #333333; border-right: #ffffff; border-radius: 0; Box-shadow: 0px 2px 8px rgba(0,0.1); border-left: 0; background-color: #337ab7; } .dropdown-menu { padding-left:10px; padding-right:10px; position:relative; List-style-type:none; } .navbar .dropdown-menu li { margin:0; padding:0; display: inline-block; } .dropdown-menu > li > a { color: #ffffff; line-height: 75px; padding: 3px; } .dropdown-menu > li > a:hover { color: #333333 !important; } .dropdown-menu > li > a:hover { color: #ffffff; background-color: #337ab7; } .m-pub { display: inline-block; margin: 3px 40px 0; Font-size: 13px; Font-weight: 400; text-transform: uppercase; letter-spacing: .14em; color: white; -webkit-Transition: none; -moz-Transition: none; -ms-Transition: none; -o-Transition: none; Transition: none; position: relative; } .m-pub:after,.m-pub:focus{ color: #ffffff; background-color: #337ab7; } .dropdown-menu li .m-pub:hover:after { content: ''; position: absolute; left: 50%; margin-left: -10px; margin-top: 55px; border-left: 0; border-bottom: 17px solID transparent; border-top: 17px solID transparent; border-left: 14px solID #333333; transform: rotate(-90deg); background: none; } 我提供了一个Jsfiddle：
JSFiddle
要在单击下拉菜单时向下移动内容,您需要更改.container,内容,本身或下拉菜单相对的父/祖父项元素.我选择添加margin-bottom祖父母,在这种情况下,是nav元素.您可以轻松地将margin-top添加到.container.无论哪种方式,您都需要将边距设置为等于.dropdown-menu的高度,该设置为120px.我创建了以下规则来实现此目的：
nav.navbar.open { margin-bottom: 120px;} 点击li.dropdown时,Jquery将添加额外的类.open.我只是用这个快速的Jquery来完成这个：
$("li.dropdown").click(function() { $("nav.navbar" ).toggleClass( "open");}); 这就是所需要的.单击li.dropdown时,会向nav元素添加.open,这会将其底部边距增加到.dropdown-menu的相同高度.边距不会影响.dropdown-menu,因为它绝对定位,而只是按下.container,就好像.dropdown-menu没有从文档流中删除.使用li.dropdown而非#menu-trigger(链接本身)的原因是因为如果您使用链接,然后单击.dropdown-menu,则菜单将被取消,但保证金仍然存在.通过使用下拉菜单的父级,只要单击父级的子级,就会注册click事件.如果使用兄弟,那么触发器不会发生.
$("li.dropdown").click(function() { $("nav.navbar").toggleClass("open");}); body { margin: 0; padding: 0; Font-family: "Helvetica",sans-serif; Font-weight: 500; Font-style: normal; Font-size: 12px; line-height: 1.5;}.navbar-default { background-color: #ffffff;}.navbar { min-height: 65px; padding-top: 5px; margin-bottom: 0px; border-bottom: solID 2px #eee;}.navbar-header { margin-top: -12px;}.navbar-brand { padding-top: 0px !important;}/* for button placement*/.navbar-toggle { margin-top: 26px;}/*for collapsed navbar*/.navbar-collapse { margin-top: 12px;}.site-logo { max-wIDth: 135px; min-wIDth: 120px;}.navbar-default .navbar-nav > li > a { text-transform: uppercase; background-color: #ffffff !important; color: #333333;}.navbar-default .navbar-nav > li > a:hover { color: #3381d0;}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a:hover { background-color: #ffffff; border-bottom: 2px solID #ff5d1c; color: #ff5d1c; bottom: -2px;}.nav>li { position: static !important;}/* For navbar dropdown*/.navbar .dropdown-menu { min-wIDth: 1349px; wIDth: 100%; height: 120px; margin-top: 51px; z-index: 1; left: 0; text-align: center; padding-right: 10px; position: absolute; List-style-type: none; border-top: 2px solID #ff5d1c; border-bottom: 2px solID #333333; border-right: #ffffff; border-radius: 0; Box-shadow: 0px 2px 8px rgba(0,0.1); border-left: 0; background-color: #337ab7;}.dropdown-menu { padding-left: 10px; padding-right: 10px; position: relative; List-style-type: none;}.navbar .dropdown-menu li { margin: 0; padding: 0; display: inline-block;}.dropdown-menu > li > a { color: #ffffff; line-height: 75px; padding: 3px;}.dropdown-menu > li > a:hover { color: #333333 !important;}.dropdown-menu > li > a:hover { color: #ffffff; background-color: #337ab7;}.m-pub { display: inline-block; margin: 3px 40px 0; Font-size: 13px; Font-weight: 400; text-transform: uppercase; letter-spacing: .14em; color: white; -webkit-Transition: none; -moz-Transition: none; -ms-Transition: none; -o-Transition: none; Transition: none; position: relative;}.m-pub:after,.m-pub:focus { color: #ffffff; background-color: #337ab7;}.dropdown-menu li .m-pub:hover:after { content: ''; position: absolute; left: 50%; margin-left: -10px; margin-top: 55px; border-left: 0; border-bottom: 17px solID transparent; border-top: 17px solID transparent; border-left: 14px solID #333333; transform: rotate(-90deg); background: none;}nav.navbar.open { margin-bottom: 120px;} <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/CSS/bootstrap.min.CSS" rel="stylesheet" /></head><body> <nav > <div > <div > <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span >Toggle Navigation</span> <span ></span> <span ></span> <span ></span> </button> <a href="#"></a> </div> <div ID="bs-example-navbar-collapse-1"> <ul ID="nav"> <li ><a href="#">link</a> </li> <li ><a href="#">link</a> </li> <li ><a href="#">link</a> </li> <li > <a href="#" data-toggle="dropdown" ID="menu-trigger">Drop-Down Menu<i ></i></a> <ul ID="menu"> <li > <a href="#" ><i ></i>Option</a> </li> <li > <a href="" ><i ></i>Option</a> </li> </ul> </li> <li ><a href="#">link</a> </li> <li ><a href="#">link</a> </li> </ul> </div> </div> </nav> <div > </div> <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.5/Js/bootstrap.min.Js"></script></body>
该代码段足够小,可以与移动视图相关联,因此您需要全屏查看.或者你可以查看codepen.
需要注意的是,您为.dropdown-menu添加的一些样式会破坏移动版本,因此您可能需要查看它们,或者添加一些媒体查询来修复它们.
总结以上是内存溢出为你收集整理的html – 点击下拉菜单按下内容全部内容，希望文章能够帮你解决html – 点击下拉菜单按下内容所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）