如何不使用jQuery在移动模式下的菜单栏中缩小文本？
[英]How to NOT shrink text within menu bar on Mobile mode using jquery?
问题描述
我正在此菜单栏上工作，该菜单栏具有很好的切换功能。 但是我的问题是，当用户单击菜单栏图标（在移动模式下）时，菜单栏从左到右打开，如果用户再次单击它，菜单栏将关闭，但会缩小其中的文本。 基本上，我只想在不缩小文本的情况下将其关闭，而在close时也要使文本向左移动 。 谁能告诉我我在jquery代码中做错了或丢失了什么吗？ 先感谢您！
这是可以正常运行的DEMO ，但是随着文本问题的缩小
$(document).ready(function(){ $('.dropdown').hover(function(){ $(this).addClass('open'); }, function(){ $(this).removeClass('open'); }); $('#nav-toggle').click(function(){ $(this).toggleClass('active'); $(".navbar-collapse").animate({width:"toggle"}); }); $('#mobile-subnav').click(function(){ if($('.second-nav .navbar-left').css('display') == 'block'){ $('.second-nav .navbar-left').slideUp(function(){ $(this).addClass('not-visible'); }); $(this).html('<i class="fa fa-bars"></i> Open Submenu'); } else { $('.second-nav .navbar-left').slideDown(function(){ $(this).removeClass('not-visible'); }); $(this).html('<i class="fa fa-close"></i> Close Submenu'); } }); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <style> body .navbar-nav.navbar-right li.login-desktop a:hover, body .navbar-nav.navbar-right li.login-desktop a:active, body .navbar-nav.navbar-right li.login-desktop a:focus { color: #fff; } body .navbar-nav.navbar-right li.signup-desktop a { border: 1px solid #999; } body .navbar-nav.navbar-right li.signup-desktop a:hover { border: 1px solid #ccc; } body #nav-toggle span, body #nav-toggle span:before, body #nav-toggle span:after { background: #fff; } body .navbar-nav > li > .dropdown-menu { background: #000000; border: 0px; color: #fff; } body .navbar-nav > li > .dropdown-menu .divider { background-color: #343434; } body .navbar-nav > li > .dropdown-menu li a { color: #ffffff; } body .navbar-nav > li > .dropdown-menu li a:hover { background: #A11D2E; } body .navbar-nav > li > .dropdown-menu .dropdown-submenu .open { background: rgba(0, 0, 0, 0.7); } body .navbar-nav > li > .dropdown-menu .dropdown-submenu .dropdown-menu { background: rgba(0, 0, 0, 0.7); border: 0px; } .navbar-default { background:#000000; border-bottom: 0px; margin-bottom: 0px; width: 100%; position: absolute; top: -73px; margin-top:60px; } .navbar-nav li a { padding: 12px 20px; } .navbar-default .navbar-nav > li > a:hover { background: none; } .navbar-default .navbar-nav > li > a { color: #333; background: none; } .navbar-nav > li > a { font-weight: bold; font-size: 14px; font-weight: normal; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover { background: none; border-bottom: 2px solid #DB1D1B; } .navbar-default .navbar-nav > a:visited, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { color: #DB1D1B; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a { color: #DB1D1B; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover { color: #DB1D1B; } .navbar-default .navbar-nav > li > a { padding: 11px 13px; line-height: 13px; margin: 16px 5px; margin-bottom: 14px; border-radius: 2px; letter-spacing: 0.1px; color: #fff; font-size: 12px; text-transform: uppercase; font-weight: 600; } .nav-open .navbar-default { height: 100%; background: none; } .nav-open .navbar-default .navbar-nav.navbar-left li:first-child a, .nav-open .navbar-default .navbar-nav > li > a { color: #fff; } .nav-open .navbar-nav.navbar-right li.signup-desktop ai { display: none; } #nav-toggle { position: absolute; left: 20px; top: 20px; display: none; } #nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 3px; width: 25px; background: #2E353B; position: absolute; display: block; content: ''; } #nav-toggle span:before { top: -8px; } #nav-toggle span:after { bottom: -8px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 200ms ease-in-out; } #nav-toggle.active span { background-color: transparent; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); } @media screen and (max-width: 767px) { .theMainPicture{display: none;} #scrolltopbtn{display: none;} body.nav-open { position: absolute; width: 100%; overflow: hidden; margin-left: 235px; } body #nav-toggle { display: block; color: red; z-index: 4; } .sliding-picture{ z-index: 999; } .slide{ z-index: 999; } body #nav-toggle.active { position: absolute; } body .navbar-default .navbar-collapse { width: 240px; background: #202630; box-shadow: inset -10px 0 5px -5px rgba(0, 0, 0, 0.25); top: 0px; left: 15px; position: fixed; border-top: 0px; height: 100%; min-height: 100%; display: none; } body .navbar-default .navbar-nav { margin-top: 0px; margin-bottom: 0px; } body .navbar-default .navbar-nav.navbar-left li:first-child a { margin-left: 0px; } body .navbar-default .navbar-nav.navbar-left li a { padding-top: 25px; padding-bottom: 25px; margin-bottom: 0px; } body .navbar-default .navbar-nav.navbar-nav > .open > a { background: rgba(0, 0, 0, 0.1); } body .navbar-default .navbar-nav.navbar-right { width: 240px; } body .navbar-default .navbar-nav.navbar-right li a.user-link-desktop:hover, body .navbar-default .navbar-nav.navbar-right li a.user-link-desktop:active { background: rgba(0, 0, 0, 0.1); } body .navbar-nav.navbar-right li.signup-desktop a { border-radius: 0px; padding: 20px; margin-top: 0px; } body #home-content { margin-top: 0px; } .home .navbar-nav > li > .dropdown-menu, .navbar-nav > li > .dropdown-menu { background: rgba(0, 0, 0, 0.2); border: 0px; color: #fff; } .home .navbar-nav > li > .dropdown-menu .divider, .navbar-nav > li > .dropdown-menu .divider { border-color: #090E16; } .home .navbar-nav > li > .dropdown-menu li a, .navbar-nav > li > .dropdown-menu li a { color: #ccc; } .dropdown .dropdown-menu .divider { background-color: #494E56; } .navbar-nav .open .dropdown-menu { background: #fff; } .navbar-nav .open .dropdown-menu { background: rgba(0, 0, 0, 0.2); } .navbar-nav .open .dropdown-menu .divider { border-color: #494E56; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #fff; } .main-nav-row { margin-left: 0px; margin-right: -30px; } .second-nav { overflow-x: hidden; } .second-nav .navbar-left { display: none; width: 100%; } .second-nav #mobile-subnav { display: block; } .second-nav .navbar-right { margin-right: -15px; width: 50%; float: right; } .second-nav .navbar-right input { width: 170px; } .second-nav li { width: 100%; } .second-nav.navbar-default .navbar-nav li { border: 0px; } .second-nav.navbar-default .navbar-nav li.dropdown.open a.dropdown-toggle { color: #fff; } .second-nav .dropdown-menu { padding: 0px; margin: 0px; color: #333; } .second-nav .dropdown-menu a.dropdown-toggle { color: #333; } #sidebar .block.list a.block-thumbnail .small-box-overlay { border-radius: 0px; } #sidebar .block.list .block-contents { padding-left: 30px; } .navbar-brand img { width: 140px; height: auto; } .navbar > .container .navbar-brand { display: block; float: none; width: 140px; margin: 0px auto; margin-top: 5px; padding: 0px; padding-top: 13px; } } </style> </head> <body id="app-layout"> <nav class="navbar navbar-default navbar-static-top" style = "position:fixed;"> <div class="container"> <div style = "padding-top:8px;background:#000000;" class="navbar-header"> <a id="nav-toggle" href="#"><span></span></a> <a class="navbar-brand" href="#"> <img src="" alt=""/> </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style = "z-index:-1;"> <ul style = "padding-top:8px;" class="nav navbar-nav navbar-left"> <li><a href="#">My account</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle">This is link 1</a> <ul class="dropdown-menu multi-level" role="menu"> <li><a href="#">someLink</a></li> </li> </ul> </li> <li class="dropdown"><a href="#" class="dropdown-toggle">This is link 2</a> <ul class="dropdown-menu multi-level" role="menu"></li> <li><a href="#">Course 1</a></li> <li><a href="#">Course 2</a></li> </ul> </li> <li class="dropdown"><a href="#">This is link 3</a></li> </ul> </div> </div> </nav> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2016-12-15 06:21:36
您需要在Media-query中的CSS中添加以下规则。
ul.nav.navbar-nav.navbar-left {
width: 240px;
float: right;
}
此外，您的标记在很多地方都不匹配。 结帐： https : //jsfiddle.net/0ghv6the/1/进行我的更改。
我的 jQuery 代码无法有效地打开和关闭移动菜单栏
[英]My jQuery code is not working efficiently to open and close mobile menu bar
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.