我有一支笔，请将您的浏览器尺寸最小化为移动尺寸，您应该会看到汉堡菜单。 这个想法是当你点击菜单时应该发生: - 汉堡包图标更改为“x”关闭图标 - 菜单向下滑动，这是使用类“isOPen”，它使用 css 关键帧(这是在笔上工作!)
当我点击“x”关闭图标时，应该会发生这种情况:
- 'x' 关闭图标恢复到汉堡菜单
- 菜单向上滑动(这可以通过应用也使用 CSS 关键帧的“isClose”类来实现。(不适用于笔)
我要解决的问题:将关闭图标恢复为汉堡菜单并向上滑动菜单。
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 global-action-bar">
<div class="global-action-bar-container">
<div class="col-xs-4 col-sm-6">
<!-- CONTACT -->
<a class="visible-xs" href="#"><i class="fa fa-phone"></i> (111) 111-111</a>
<!-- FEEDBACK -->
<div class="hidden-xs">
<a href="#"><i class="fa fa-phone"></i> Contact us (USA) (111) 111-111</a>
<span class="divider"> | </span>
<a href="#"><i class="fa fa-pencil-square-o"></i> Feedback</a>
</div>
</div>
<div class="col-xs-8 col-sm-6 location-language-currency">
<!-- LOCATION -->
<a href="#">Change Location</a>
<img class="location-flag" src="http://placehold.it/24x24" alt="USA">
<!-- LANGUAGE -->
<select class="hidden-xs" id="ddlLanguage" name="SelectedLanguage">
<option selected="selected" value="en-US">English</option>
<option value="es-MX">Español</option>
</select>
<!-- CURRENCY -->
<select class="hidden-xs" id="ddlLanguage" name="SelectedLanguage">
<option selected="selected" value="en-US">USD</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- ========== @END GLOBAL BAR COMPONENT ======== -->
<!-- ========== HEADER NAVIGATION COMPONENT ============= -->
<div class="container-fluid margin-none">
<div class="row header-navigation padding-none">
<div class="col-xs-12">
<div class="header-navigation-container">
<!-- Header Brand -->
<div class="col-xs-4 col-sm-2 header-navigation-logo">
<a href="#">
<img src="http://placehold.it/130x45" alt="our company" height="45">
</a>
</div>
<!-- Header Mobile icons -->
<div class="col-xs-8 visible-xs header-mobile-icons">
<!-- User icon -->
<a href="javascript:void(0)" class="fa fa-user-circle" aria-hidden="true"></a>
<!-- Cart icon & Cart indicator -->
<a href="javascript:void(0)" class="fa fa-shopping-cart" aria-hidden="true"></a>
<span class="circle"></span>
<!-- Mobile Menu Icon -->
<a class="mobile-icon" id="mobileIcon" href="#"><span></span></a>
</div>
<!-- Header Desktop nav -->
<div class="hidden-xs col-sm-10 desktop-nav">
<ul class="margin-none text-right">
<li class="hidden-md hidden-lg">
<a href="javascript:void(0)">Menu <i class="fa fa-angle-down" aria-hidden="true"></i></a>
</li>
<li class="hidden-xs hidden-sm">
<a href="search_refine.html">Products</a>
</li>
<li class="hidden-xs hidden-sm">
<a href="javascript:void(0)">Manufacturers</a>
</li>
<li class="hidden-xs hidden-sm hidden-md">
<a href="javascript:void(0)">Applications</a>
</li>
<li class="hidden-xs hidden-sm hidden-md">
<a href="javascript:void(0)">Services & Tools</a>
</li>
<li class="hidden-xs hidden-sm hidden-md">
<a href="javascript:void(0)">Help</a>
</li>
<li class="hidden-xs hidden-sm hidden-lg">
<a href="javascript:void(0)">More <i class="fa fa-angle-down" aria-hidden="true"></i></a>
</li>
<li class="history-account-login-nav">
<a href="javascript:void(0)">Order History</a>
</li>
<li class="history-account-login-nav">
<a href="javascript:void(0)">Log In</a>
</li>
<li class="padding-none">|</li>
<li>
<a href="javascript:void(0)"><strong>Register</strong></a>
</li>
<li class="history-account-login-nav padding-right-none">
<a href="javascript:void(0)">
<i class="fa fa-shopping-cart fa-lg" alt="Cart"></i><span class="badge badge-cart">455</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- MOBILE MENU -->
<div class="col-xs-12 padding-none margin-none mobile-menu hidden" id="mobileMenu">
<ul>
<li class="active"><a href="javascript:void(0)">Home</a></li>
<li class="active"><a href="javascript:void(0)">Products <i class="fa fa-angle-right fa-lg pull-right"></i></a></li>
<li><a href="javascript:void(0)">NEWEST Products</a></li>
<li><a href="javascript:void(0)">Manufacturers</a></li>
<li><a href="javascript:void(0)">Contact Us</a></li>
</ul>
<div class="col-xs-12 mobile-menu-welcome-logout padding-none margin-none">
<p class="mobile-menu-welcome-user padding-none margin-none">Welcome User</p>
<p class="mobile-menu-log-out padding-none margin-none">
<a href="javascript:void(0)"><i class="fa fa-user-circle"></i> Log Out</a>
</p>
</div>
</div>
<!-- ========== @END HEADER NAVIGATION COMPONENT ============= -->
<!-- ========== SEARCH COMPONENT ============= -->
<div class="container-fluid search">
<div class="row">
<div class="search-container">
<div class="col-xs-12 col-sm-9 col-sm-offset-0 col-md-5 col-md-offset-3">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn dropdown-search-button dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
All <i class="fa fa-angle-down" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu" id="dropdown">
<li><a href="#" class="selected">All</a>
<li><a href="#" class="category"> Capacitors</a>
<li><a href="#" class="category"> Circuit Protection</a>
<li><a href="#" class="category"> Computing</a>
<li><a href="#" class="category"> Connectors</a>
<li><a href="#" class="category"> Diodes & Rectifiers</a>
<li><a href="#" class="category"> EMI/RFI Components</a>
</ul>
</div>
<input type="text" id="inputField" class="form-control search-input" placeholder="Part # or Keyword">
<div class="input-group-btn">
<button class="btn m-primary-btn search-btn"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
<!-- checkboxes -->
<div class="hidden-xs col-sm-3 col-md-4 checkboxes padding-none">
<label title="stocked" class="checkbox-spacing">
<input type="checkbox" name="" value="" class="stocked"> Stocked
</label>
<label title="RoHS" class="checkbox-spacing">
<input type="checkbox" name="" value="" > RoHS
</label>
</div>
</div>
<!-- @end search container -->
</div>
</div>
<!-- ========== @END SEARCH COMPONENT ============= -->
最佳答案
使用 .hasClass() 代替 .is() 检查元素是否有类。
Javascript:
menu.on("click", function(e){
e.preventDefault();
if(menu.hasClass('active')){
closeMenu();
}else{
openMenu();
}
});
关于jquery - 如何使用 CSS 汉堡菜单上下滑动移动菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46386128/