jquery搜索栏在叠加菜单上展开

时间：2018-03-14 10:18:05

标签： javascript jquery menu

我想创建一个像http://www.barangaroo.com/这样的菜单 点击humburger菜单图标后，我打开了叠加部分。它按照我的预期工作。 但是对于搜索选项，关闭叠加层时它不会关闭。 这是来自jsfiddle的代码 https://jsfiddle.net/g7pe9uw6/11/ 

jQuery(function($) {
    'use strict';

    $('#toggle').click(function () {
        $(this).toggleClass('active');
        $('#overlay').toggleClass('open');
    });

    $('.icon').on('click',function(e){
        e.preventDefault();
        $('#toggle').addClass('active');
        $('#overlay').addClass('open');
        $('.search').addClass('expanded');
        
    });

    $('.button__container__icon.active').click(function () {
        $('.search').removeClass('expanded');
    });

}); // JQuery end
header {
	height: 400px;
	background: rgba(0,0,0,.5);
}
header .header__menu__list li {
  display: inline-block;
}
header .header__menu__list li .header__menu__list__search {
  display: block;
  padding: 0 25px;
}
header .header__menu__list li .header__menu__list__search i {
  font-size: 40px;
}
header .header__menu__list .brand img {
  margin-top: -30px;
}

.button__container {
  position: fixed;
  top: 70px;
  left: 70px;
  float: left;
  width: 100%;
  height: 27px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
}
.button__container:hover {
  opacity: 1;
}
.button__container__icon {
  width: 35px;
  height: 27px;
  float: left;
  position: relative;
}
.button__container__icon.active .top {
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #fff;
}
.button__container__icon.active .middle {
  opacity: 0;
  background: #fff;
}
.button__container__icon.active .bottom {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #fff;
}
.button__container span {
  background: #fff;
  border: none;
  height: 2px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .35s ease;
  cursor: pointer;
}
.button__container span:nth-of-type(2) {
  top: 10px;
}
.button__container span:nth-of-type(3) {
  top: 20px;
}

.overlay {
  position: fixed;
  background: #000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s,visibility .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
  overflow: auto;
}
.overlay.open li {
  animation: fadeInRight .5s ease forwards;
  animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  animation-delay: .50s;
}
.overlay .overlay-menu {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-weight: 400;
  text-align: center;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  transition: .35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
.box {
  position: relative;
  width: 220px;
}

.search {
  width: 200px;
  max-width: 0;
  padding: 5px;
  transition: all .5s ease;
  position: absolute;
  right: 20px;
  box-sizing: border-box;
  opacity: 0;
}

.search.expanded {
  max-width: 200px;
  opacity: 1;
}

.icon {
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
  right: 0;
}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="src/css/app.css">
    <title>Hello, world!</title>
</head>

<body>
    <div id="app">
        <header>
            <div class="header__menu">
                <div class="container">
                    <div class="header__menu_icon">
                        <div class="button__container">
                            <div class="button__container__icon" id="toggle">
                                <span class="top"></span>
                                <span class="middle"></span>
                                <span class="bottom"></span>
                            </div>
                            <ul class="header__menu__list">
                                <li>
                                    <!-- <form action="#">
                                        <a href="#" class="header__menu__list__search" id="search-toggle">
                                            <i class="fa fa-search"></i>
                                        </a>
                                        <input type="text">
                                    </form> -->
                                    <div class="box">
                                        <input class="search" type="search" placeholder="Search" />
                                        <div class="icon">s</div>
                                    </div>
                                    
                                </li>
                                <li>
                                    <a href="#" class="brand">
                                        <img src="http://via.placeholder.com/176x40" alt="" class="img-fluid">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
             <!-- header__menu -->
            
        </header>

        
        <div class="overlay" id="overlay">
        
            <div class="overlay-menu">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
        
                            <ul>
                                <li>
                                    <a href="#">Home</a>
                                </li>
                                <li>
                                    <a href="#">About</a>
                                </li>
                                <li>
                                    <a href="#">Work</a>
                                </li>
                                <li>
                                    <a href="#">Contact</a>
                                </li>
                            </ul>
        
                        </div>
                        <div class="col-md-4">
        
                            <ul>
                                <li>
                                    <a href="#">Home</a>
                                </li>
                                <li>
                                    <a href="#">About</a>
                                </li>
                                <li>
                                    <a href="#">Work</a>
                                </li>
                                <li>
                                    <a href="#">Contact</a>
                                </li>
                            </ul>
        
                        </div>
                        <div class="col-md-4">
        
                            <ul>
                                <li>
                                    <a href="#">Home</a>
                                </li>
                                <li>
                                    <a href="#">About</a>
                                </li>
                                <li>
                                    <a href="#">Work</a>
                                </li>
                                <li>
                                    <a href="#">Contact</a>
                                </li>
                            </ul>
        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script src="src/js/app.js"></script>
</body>

</html>

你能帮我解决一下这个功能吗？ 感谢

2 个答案:

答案 0 :(得分：0)

如果您正在寻找的是

，请检查以下问题

https://jsfiddle.net/g7pe9uw6/27/

您只需要从搜索框中删除＆＃34; expanded：class即可将其关闭。

$('#toggle').click(function () {

    $(this).toggleClass('active');

    $('#overlay').toggleClass('open');

    $('.search').removeClass('expanded');

});

答案 1 :(得分：0)

不是最好的解决方案，但它有效：D

<强>被修改 

jQuery(function($) {
  'use strict';

  $('#toggle').click(function () {
    var dat = $(this).data('from');
    $(this).toggleClass('active');
    if (typeof dat === 'undefined') {
      $('#overlay').toggleClass('open');
    } else {
      $('.search').toggleClass('expanded');
    }
    $(this).removeData('from');
  });

  $('.icon').on('click',function(e){
    e.preventDefault();
    var toggleOpened = $('#toggle').hasClass('active');
    var dat = $('#toggle').data('from');

    if (!toggleOpened) {
      $('#toggle').toggleClass('active');
    }
    if (typeof dat === 'undefined') {
      $('#toggle').data('from', 'search');
    } else {
      $('#toggle').removeData('from');
    }
    $('#overlay').removeClass('open');
    $('.search').toggleClass('expanded');
  });

  $('.button__container__icon.active').click(function () {
    $('.search').removeClass('expanded');
  });

}); // JQuery end
相关问题
最新问题