切换移动导航和地址数据

Question

伙计们，

现在我一直试图让它在 jQuery 中工作，但我不知道如何实现它。 这是关于基本网站的移动导航。 基本上，如果我们单击带有地址数据的 3 个点，则我试图实现移动导航关闭，反之亦然。你可以在这个例子中看到它：

https://www.templatemonster.com/de/demo/62436.html 选择移动版本以了解我的意思。

有谁知道如何用 jQuery 或 javascript 做到这一点？ 这是我目前拥有的：

Adress Data

$('.js--adress-icon').click(function() {
        var kont = $('.js--adress-nav');

        kont.slideToggle(200);
});

Mobile Navigation

var hamburger = $('#hamburger-icon');

hamburger.click(function() {
        var nav = $('.js--main-nav');
        nav.slideToggle(200);
        hamburger.toggleClass('active');
        return false;
});

if ($(window).width() < 768){
        $('.main-navigation li a').on('click', function(){
            $('.js--main-nav').hide();
            $('#hamburger-icon').removeClass('active');
        });
};

提前谢谢！

Answer 1

我不知道你的 html 是什么样的，但这是使用 css 和 javascript 实现这一目标的简单方法

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<nav class="menu">
  <ul class="active">
    <li class="current-item"><a href="#">Home</a></li>
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
  </ul>

  <a class="toggle-nav" href="#">&#8285;</a>
</nav>
</body>

然后你的javascript

 jQuery(document).ready(function() {
    jQuery('.toggle-nav').click(function(e) {
      jQuery(this).toggleClass('active');
      jQuery('.menu ul').toggleClass('active');

      e.preventDefault();
    });
  });

然后你的CSS

 /*----- Toggle Button -----*/

  /*----- Menu -----*/
  @media screen and (min-width: 860px) {
    .menu {
      width:100%;
      padding:10px 18px;
      box-shadow:0px 1px 1px rgba(0,0,0,0.15);
      border-radius:3px;
      background:#303030;
    }
  }

  .menu ul {
    display:inline-block;
  }

  .menu li {
    margin:0px 50px 0px 0px;
    float:left;
    list-style:none;
    font-size:17px;
  }

  .menu li:last-child {
    margin-right:0px;
  }

  .menu a {
    text-shadow:0px 1px 0px rgba(0,0,0,0.5);
    color:#777;
    transition:color linear 0.15s;
  }

  .menu a:hover, .menu .current-item a {
    text-decoration:none;
    color:#66a992;
  }
  /*----- Responsive -----*/
  @media screen and (max-width: 1150px) {
    .wrap {
      width:90%;
    }
  }

  @media screen and (max-width: 970px) {
    .search-form input {
      width:120px;
    }
  }

  @media screen and (max-width: 860px) {
    .menu {
      position:relative;
      display:inline-block;
    }

    .menu ul.active {
      display:none;
    }

    .menu ul {
      width:100%;
      position:absolute;
      top:120%;
      left:0px;
      padding:10px 18px;
      box-shadow:0px 1px 1px rgba(0,0,0,0.15);
      border-radius:3px;
      background:#303030;
    }

    .menu ul:after {
      width:0px;
      height:0px;
      position:absolute;
      top:0%;
      left:22px;
      content:'';
      transform:translate(0%, -100%);
      border-left:7px solid transparent;
      border-right:7px solid transparent;
      border-bottom:7px solid #303030;
    }

    .menu li {
      margin:5px 0px 5px 0px;
      float:none;
      display:block;
    }

    .menu a {
      display:block;
    }

    .toggle-nav {
      padding:20px;
      float:left;
      color:#777;
      font-size:20px;
    }

    .toggle-nav:hover, .toggle-nav.active {
      text-decoration:none;
      color:#66a992;
    }

}

检查这个小提琴：https://jsfiddle.net/wggs8pf8/