jquery - 不能为汉堡包图标创建一个功能来打开隐藏的 div 吗？

标签 jquery html css

我以前在早期版本中有以下功能，但在使用 flexbox 重新设计标题布局后，我无法再获得将 div 类切换到的功能(使用汉堡图标查看响应式导航菜单)工作？

$(window).scroll({
    previousTop: 0
  },
  function() {
    var currentTop = $(window).scrollTop();
    if (currentTop < this.previousTop) {
      $(".wrapper").show(300);
    } else if (!$('#hamburger').hasClass('open')) {
      $(".wrapper").hide(300);
    }
    this.previousTop = currentTop;
  });

$(document).ready(function() {
  $('#hamburger').click(function() {
    var clicks = $(this).data('clicks');
    if (clicks) {
      $('.responsive-nav').toggleClass('responsive-nav-view');
    } else {
      $('.responsive-nav').toggleClass('responsive-nav-view');
    }
    $(this).data("clicks", !clicks);
  });
});

$(document).ready(function() {
  $('#hamburger').click(function() {
    $(this).toggleClass('open');
  });
});
/*
	Theme Name: HTML5 Blank
	Theme URI: http://html5blank.com
	Description: HTML5 Blank WordPress Theme
	Version: 1.4.3
	Author: Todd Motto (@toddmotto)
	Author URI: http://toddmotto.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	font:300 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color:#444;
        
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
a {
	color:#444;
	text-decoration:none;
}
a:hover {
	color:#444;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* container all content ends in footer */

#container {
    width: 100%;
    margin-top: 71px;
    height: 100%;
    clear: both;
    z-index: 0;
        
}

@media (max-width: 450px){
    
    #container {
        display: flex;
        width: 100%;
        margin-top: 50px;
        height: 2000px;
        z-index: 0;
    }
}

/* header */

/* ==== WRAPPER FOR HEADER START ==== */

.wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    height: 80px;
    top: 0;
    z-index: 1;
    border-bottom: solid 1px #eee;
            
}

.wrapper.hidden {
    transform: translate3d(0,-100%,0);
}

/* ==== WRAPPER FOR HEADER @ MEDIA MAX WIDTH 450 PX ==== */



@media (max-width: 899px){
    
    .wrapper {
        display: flex;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        height: 70px;
        z-index: 1;
    }
}

/* ==== WRAPPER FOR HEADER END ==== */

/* ===== SOCIAL MEDIA MENU START ==== */

/* ===== SOCIAL MENU MAX WIDTH 899 PX ==== */

@media only screen and (max-width: 899px){

    .socials {
        width: 20%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-left: 2px solid #eee;
        margin-right: 2.5%;
        padding-left: 2.5%;
        
        
    }

    .socials ul li {
        height: 35px;
        width: 35px;
        
    }

    .socials ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        align-items: center;
        padding: 0;
        width: 100%;
        justify-content: space-around;
                
    }

    .socials li img {
        max-height: 35px;
    }
}

/* ===== SOCIAL MENU MAX WIDTH 899 PX END ==== */

@media only screen and (min-width: 900px) {

    .socials {
        width: 17.5%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-left: 2px solid #eee;
        margin-right: 2.5%;
        padding-left: 2.5%;
        
        
    }

    .socials ul li {
        height: 40px;
        width: 40px;
        
    }

    .socials ul {
        display: flex;
        list-style: none;
        align-items: center;
        padding: 0;
        width: 100%;
        justify-content: space-around;
                
    }

    .socials li img {
        max-height: 40px;
    }
}

/* ===== SOCIAL MENU MIN WIDTH 900 PX END ==== */

/* ===== SOCIAL MEDIA MENU END ==== */

.header {

}
/* logo */

.logo-header {
        width: 27.5%;
        display: flex;
        flex-wrap: wrap;
        height: 70px;
        align-items: center;
        margin-left: 2.5%;
        
}

.logo-header img {
        display: flex;
        flex-wrap: wrap;
        height: 60px;
        width: 60px;
}

@media only screen and (max-width: 899px){
.logo-header {
        width: 27.5%;
        display: flex;
        flex-wrap: wrap;
        height: 70px;
        align-items: center;
        margin-left: 2.5%;
        
}

.logo-header img {
        display: flex;
        flex-wrap: wrap;
        height: 50px;
        width: 50px;
}
}

/* nav */

/* ===== FULLSCREEN NAVIGATION MENU START ==== */

/* ==== WORDPRESS PRIMARY MENU ABOVE 769 PX START ==== */

.site-nav {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    font-size: 2.4rem;
    font-weight: 400;
    font-family: 'Josefin Sans', sans-serif;
    justify-content: flex-end;
    padding-right: 2.5%;
    
        
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    align-items: center;
    
    
}

.site-nav ul:before, .site-nav ul:after { content: ""; display: table; }
.site-nav ul:after { clear: both; }
.site-nav ul { *zoom: 1; }

.site-nav ul li  {
    display: inline-block;
    color: #949494;
    text-decoration: none;
    padding-left: 1.6rem;
    
    
}
.site-nav ul li a {
    display: inline-block;
    color: #949494;
    text-decoration: none;
    
    
}
.site-nav ul li a:hover {
    display: inline-block;
    color: #555555;
    text-decoration: none;
    
}
li.current-menu-item a {
    color: #555555 !important;
    text-decoration: none;
    
}

@media only screen and (max-width: 899px){
    
    .site-nav {
        font-size: 2rem;
        padding-right: 3.5%;
    }
    
}

/* ==== WORDPRESS PRIMARY MENU ABOVE 769 PX END ==== */

/* ===== RESPOSIVE NAV START ==== */
/* ===== RESPOSIVE NAV START ==== */
/* ===== RESPOSIVE NAV START ==== */
/* ===== RESPOSIVE NAV START ==== */

/* ---- DONT SHOW RESPONSIVE IN FULL SCREEN ---- */


@media only screen and (min-width: 769px) {
.responsive-nav {
    display: none;
    }
    
.responsive-nav ul {
    display: none;
    }
    
.responsive-nav li {
    display: none;
    }

    }
/* ---- DONT SHOW RESPONSIVE IN FULL SCREEN END ---- */    
 
/* ===== RESPONSIVE NAV MOBILE MEDIA QUERY @ MIN-MAX 451-768 PX ==== */
    
@media only screen and (max-width: 768px) {
    
    .site-nav {
        display: none;
    }
    
 
    .responsive-nav {
        float:right;
        width: 50vw;
        margin: auto;
        clear: right;
        position: fixed;
        top: 70px;
        right: 0;
        border-left: 1px solid #eee;
        background: rgba(255, 255, 255, 0.9);
        min-height: 100vh;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        
    }
    
    .responsive-nav-view {
        float:right;
        width: 50vw;
        margin: auto;
        clear: right;
        position: fixed;
        top: 70px;
        right: 0;
        border-left: 1px solid #eee;
        background: rgba(255, 255, 255, 0.9);
        min-height: 100vh;
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
        
    }
    
    .responsive-nav ul {
        display: block;
        padding-left: 0px !important;
        margin: 0 !important;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 2rem;
        list-style: none;
                
   
    }
    
    .responsive-nav li {
        display: block;
        padding: 0;
        position: relative;    
    }
    
    .responsive-nav a:hover {
        color: #555555;
    }
    
    .responsive-nav li:first-child {
        display: block;
        padding-top: 10px;
        position: relative;
        
    }
    
    .responsive-nav a {
        display: block;
        padding: 0;
        text-align: center;
        text-decoration: none;
        color: #949494;
        position: relative;   
    }
}



@media only screen and (max-width: 768px) {
    
    .responsive-hide {
        width: 47.5%;
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        padding-right: 2.5%;
    }
    
    .toggle-nav {
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        align-items: center;
        height: 70px;
        
        
    }
    
    #hamburger {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 36px;
        height: 20px;
        color: #949494;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }
    
    #hamburger span {
        color: #949494;
        display: block;
        position: relative;
        height: 2px;
        width: 100%;
        background: #949494;
        border-radius: 2px;
        opacity: 1;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    
    #hamburger span:nth-child(1) {
        top: 0px;
    }

    #hamburger span:nth-child(2) {
        top: 8px;
    }

    #hamburger span:nth-child(3) {
        top: 16px;
    }
    
    #hamburger.open span:nth-child(1) {
        top: 8px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    #hamburger.open span:nth-child(2) {
        opacity: 0;
        -webkit-transition: 0.25s ease-in-out;
        -moz-transition: 0.25s ease-in-out;
        -o-transition: 0.25s ease-in-out;
        transition: 0.25s ease-in-out;    
    }

    #hamburger.open span:nth-child(3) {
        top: 8px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
    
    #hamburger:hover {
        cursor: pointer;
        color: #555555;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- wrapper -->
<div class="container">

  <!-- header -->
  <header class="wrapper">

    <div class="logo-header">
      <img src="http://testsiteclash.co.uk/wp-content/uploads/2017/03/luke-logo-layers-copy.png">
    </div>

    <!-- responsive nav -->
    <div class="responsive-hide">
      <div class="toggle-nav">
        <div id="hamburger">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <nav id="responsive-nav">
        <ul id="responsive-nav" class="responsive-nav">
          <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-32"><a href="http://testsiteclash.co.uk/">Home</a></li>
          <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://testsiteclash.co.uk/about">About</a></li>
          <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://testsiteclash.co.uk/gallery">Gallery</a></li>
          <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://testsiteclash.co.uk/contact">Contact</a></li>
        </ul>
      </nav>
    </div>
    <!-- responsive nav -->

    <!-- nav -->
    <nav class="site-nav">
      <ul>
        <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="http://testsiteclash.co.uk/">Home</a></li>
        <li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://testsiteclash.co.uk/about">About</a></li>
        <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://testsiteclash.co.uk/blog">Blog</a></li>
        <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://testsiteclash.co.uk/contact">Contact</a></li>
      </ul>
    </nav>
    <!-- /nav -->


    <div class="socials">
      <ul>
        <li>
          <a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/facebook-icon.png" id="facebook" onmouseover="newPicture()" onmouseout="oldPicture()" /></a>
        </li>
        <li>
          <a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/insta-icon.png" id="instagram" onmouseover="newPicture1()" onmouseout="oldPicture1()" /></a>
        </li>
        <li>
          <a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/twitter-icon.png" id="twitter" onmouseover="newPicture2()" onmouseout="oldPicture2()" /></a>
        </li>
        <!--<li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/pinterest-icon.png" id="pinterest" onmouseover="newPicture3()" onmouseout="oldPicture3()"/></a></li>-->
      </ul>
    </div>



  </header>
  <!-- /header -->

最佳答案

这是一个可能的解决方案，并不是说我已经对您的内容进行了相当多的修改并且不是 100% 完美。希望它能让您朝着正确的方向前进。

$( document ).ready( function () {

  var $nav = $( '.site-nav' ),
      $ham = $( '#hamburger' );

  $ham.on( 'click', function () {
  
    $ham.toggleClass( 'open' );
    $nav.toggleClass( 'reveal' );
    
  } );
  
} );
*,
*:after,
*:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  font: 300 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #444;
}

/* Clearfix */

.clear:before,
.clear:after {
  content: ' ';
  display: table;
}

.clear:after {
  clear: both;
}

.clear {
  *zoom: 1;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Flexbox Utilities */
.flex-center {
  display: flex;
  align-items: center;
}

@media ( min-width: 900px ) {
  .flex-lg-center {
    display: flex;
    align-items: center;
  }
}

/* Mobile => 899px */
header {
  display: flex;
  align-items: stretch;
  height: 70px;
  border-bottom: solid 1px #eee;
}

/* 900px plus */
@media (min-width: 900px) {
  header {
    height: 80px;
  }
}

/* Mobile => 899px */
.socials {
  border-left: 2px solid #eee;
  margin-right: 20px;
}

.socials li {
  margin-left: 20px;
}

.socials li img {
  max-height: 35px;
}


/* 900px plus */
@media ( min-width: 900px ) {
  .socials li img {
    max-height: 40px;
  }
}


/* Mobile => 899px */
.logo-header {
  flex-grow: 1;
  margin-left: 20px;
}

.logo-header img {
  width: 50px;
}


/* 900px plus */
@media ( min-width: 900px) {
  .logo-header img {
    width: 60px;
  }
}

/* Navigation */
.site-nav {
  position: fixed;
  top: 70px;
  right: 0;
  bottom: 0;
  display: block;
  font-size: 2.4rem;
  font-weight: 400;
  font-family: 'Josefin Sans', sans-serif;
  background-color: #f1f1f1;
  transform: translateX( 100% );
  transition: transform 0.5s ease-in-out;
}
.site-nav.reveal {
  transform: translateX( 0 );
}
.site-nav ul {
  display: block;
  margin: 20px
}
.site-nav li {
  margin-right: 20px;
}
.site-nav ul li a {
  color: #949494;
  text-decoration: none;
}

.site-nav ul li a:hover {
  color: #555555;
}

@media ( min-width: 900px ) {
  .site-nav {
    position: relative;
    top: initial;
    right: initial;
    bottom: initial;
    display: flex;
    background-color: transparent;
    transform: translateX( 0 );
  }
  .site-nav ul {
    display: flex;
    align-items: center;
  }
}

#hamburger {
  align-self: center;
  width: 36px;
  height: 22px;
  margin: 0 20px;
  color: #949494;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#hamburger div {
  color: #949494;
  position: relative;
  height: 2px;
  background: #949494;
  border-radius: 2px;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#hamburger div:nth-child(1) {
  top: 0px;
}

#hamburger div:nth-child(2) {
  top: 8px;
}

#hamburger div:nth-child(3) {
  top: 16px;
}

#hamburger.open div:nth-child(1) {
  top: 8px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#hamburger.open div:nth-child(2) {
  opacity: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#hamburger.open div:nth-child(3) {
  top: 8px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#hamburger:hover {
  cursor: pointer;
  color: #555555;
}

@media ( min-width: 900px) {
  #hamburger {
    display: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- header -->
<header class="wrapper">

  <div class="logo-header flex-center">
    <img src="http://testsiteclash.co.uk/wp-content/uploads/2017/03/luke-logo-layers-copy.png">
  </div>

  <div id="hamburger">
    <div></div>
    <div></div>
    <div></div>
  </div>
  
  <nav class="site-nav flex-center">
    <ul class="flex-lg-center">
      <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="http://testsiteclash.co.uk/">Home</a></li>
      <li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://testsiteclash.co.uk/about">About</a></li>
      <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://testsiteclash.co.uk/blog">Blog</a></li>
      <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://testsiteclash.co.uk/contact">Contact</a></li>
    </ul>
  </nav>
  <!-- /nav -->

  <div class="socials flex-center">
    <ul class="flex-center">
      <li>
        <a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/facebook-icon.png" id="facebook"></a>
      </li>
      <li>
        <a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/insta-icon.png" id="instagram"></a>
      </li>
      <li>
        <a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/twitter-icon.png" id="twitter"></a>
      </li>
    </ul>
  </div>

</header>
<!-- /header -->

我注意到您的 CSS 中应用了很多冗余属性。

例如，您有:

.logo-header img {
  display: flex;
  flex-wrap: wrap;
  height: 60px;
  width: 60px;
}

@media only screen and ( max-width: 899px ) {

  .logo-header img {
    display: flex;
    flex-wrap: wrap;
    height: 50px;
    width: 50px;
  }

}

什么时候可以:

.logo-header img {
  display: flex;
  flex-wrap: wrap;
  height: 60px;
  width: 60px;
}

@media only screen and ( max-width: 899px ) {

  .logo-header img {
    height: 50px;
    width: 50px;
  }

}

无需重新定义display和 flex-wrap因为它已经为 .logo-header img 定义了在任何屏幕尺寸。

您会注意到我还将您使用媒体查询的方式转换为移动优先的方法，您首先使用桌面:

.logo-header img {
  /* This was applied at 900px plus */
}

@media only screen and ( max-width: 899px ) {

  .logo-header img {
    /* This was applied at 0 to 899px */
  }

}

我构建的前几个响应式网站就是这样做的，然后我将它换成了我在示例中的做法，一旦你做了几次，你就会发现它更自然了。移动优先将是这样的:

.logo-header img {
  /* This was applied at 0 to 899px */
}

@media only screen and ( min-width: 900px ) {

  .logo-header img {
    /* This was applied at 900px plus */
  }

}

请注意阅读它是如何更自然的？从小到大。

我也删除了一些其他不相关的 CSS，即 .wrapper您不需要删除最初没有任何元素的填充或设置 z-index当你不定位它时。

关于jquery - 不能为汉堡包图标创建一个功能来打开隐藏的 div 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42767025/

上一篇：CSS 字体过渡不适用于 flex

下一篇：html - 试图在拍卖服务页面创建简单的菜单，有一些问题

相关文章：

javascript - 使用 .data() 从附加到它的函数中引用元素？

html - 有没有办法根据其父项在组中设置 css 样式？

php - jQuery 自定义模板无法正常工作

css - 修复两个子 div 的对齐方式

css - 无法弄清楚悬停菜单插入符号

javascript - jQuery - 如果没有选择任何选项不起作用则发出警报

jQuery Switch Case 插件？

Jquery mobile 1.2 横向问题在页面转换前跳转/调整大小

html - 如何在我的网站上查看其他网站的一部分？

html - 如何使用css为水平线实现以下样式

©2024 IT工具网  联系我们