单击时不显示移动幻灯片导航

Question

我继承了另一个编码员/程序员在以前的站点上实现的移动导航滑块。我正在尝试在新站点上重新构建滑块，虽然我将 HTML、CSS 和脚本复制到新环境中，但我并没有成功运行。我觉得我在这个过程中遗漏了一些东西，但我无法确定它可能是什么。

我在下面发布了我的代码，但也有一个 fiddle 设置，包括与站点上使用的 3.2.1 库的连接：https://jsfiddle.net/Lhypng9j/6/

任何帮助，无论是帮助获得此运行还是指向可能提供帮助的资源，我们都将不胜感激！

谢谢。

这是我的 HTML:

            <div id="m-toggle" class="icon-bars">
                <span></span>
            </div>
            <nav class="mobile-nav">
                <ul>
                    <li><a href="index.html">Events</a></li>
                    <li><a href="service-category.html">Self-Service</a></li>
                    <li><a href="connect-page.html">Connect</a></li>
                    <li><a href="#">Gallery</a></li>
                </ul>
            </nav>

我的CSS:

#m-toggle {
  background-color:red;
  width:50px;
  height:50px;
  display: block;
  position: absolute;
  right: 20px;
  top: 45px;
  cursor: pointer;
  font-size: 28px; }

.mobile-nav {
  display: none;
  position: absolute;
  top: 0px;
  right: -280px;
  width: 280px;
  height: 2000px;
  float: none;
  margin-top: 0;
  background: #fff;
  z-index: 3; }

  .mobile-nav:before {
    content: '';
    height: 4px;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1; }

  .mobile-nav > ul > li {
    display: block;
    margin: 0;
    border-bottom: 1px solid #D8D8D8;
    font-size: 12px;
    position: relative;
    transition: all 0.15s;
    cursor: pointer;
    }

    .mobile-nav > ul > li.x {
      border-bottom: none;
      background: #fff; }

      .mobile-nav > ul > li.x a {
        color: #79bde9; }

      .mobile-nav > ul > li.x:before {
        color: #666;
        content: '-';
        top: 8px;
        cursor: pointer; }

    .mobile-nav > ul > li a {
      color: #666; }

      .mobile-nav > ul > li a:hover {
        color: #79bde9; }

    .mobile-nav > ul > li > a {
      padding: 11px 0px 11px 20px;
      font-size: 20px;
      width: 100%;
      display: block; }

    .mobile-nav > ul > li > ul li:not(.track) a {
      font-size: 16px;
      font-weight: 500;
      padding-left: 30px; }

  .mobile-nav.active {
        display: block; }

我的脚本（在外部 js 文件中）：

$('#m-toggle').on('click',function(){
        $(this).toggleClass('x');
        $('.mobile-nav').slideToggle(150);
    });

    $(window).on('resize',function(){
        var ww = $(window).width();
        if(ww > 960){
            $('.mobile-nav').removeAttr('style');
            $('#m-toggle').removeClass('x');
        }
    })

    $('#menu-mobile-nav>li').on('click', function() {
        $('#menu-mobile-nav li .sub-menu').each(function() {
            if($(this).is(":visible")) {
                $(this).toggleClass('x').slideUp();
            }
        });
        if($(this).children('.sub-menu').length) {
            $(this).toggleClass('x');
            if(!$(this).children('.sub-menu').is(":visible")) {

                $(this).children('.sub-menu').slideToggle();

            }
            return false;
        }
    });

    $('a').on('click',function(e){
        e.stopPropagation();
    });

Answer 1

您需要为 .mobile-nav

调整 top 和 right 值

希望这就是您要找的。如果需要，很乐意解释或提供更好的解决方案。

$('#m-toggle').on('click',function(){
        $(this).toggleClass('x');
        $('.mobile-nav').slideToggle(150);
    });

    $(window).on('resize',function(){
        var ww = $(window).width();
        if(ww > 960){
            $('.mobile-nav').removeAttr('style');
            $('#m-toggle').removeClass('x');
        }
    })

    $('#menu-mobile-nav>li').on('click', function() {
  $('#menu-mobile-nav li .sub-menu').each(function() {
   if($(this).is(":visible")) {
    $(this).toggleClass('x').slideUp();
   }
  });
  if($(this).children('.sub-menu').length) {
            $(this).toggleClass('x');
   if(!$(this).children('.sub-menu').is(":visible")) {

    $(this).children('.sub-menu').slideToggle();

   }
   return false;
  }
 });

    $('a').on('click',function(e){
        e.stopPropagation();
    });

#m-toggle {
  background-color:red;
  width:50px;
  height:50px;
  display: block;
  position: absolute;
  right: 20px;
  top: 45px;
  cursor: pointer;
  font-size: 28px; }

.mobile-nav {
  display: none;
  position: absolute;
  top: 95px;
  right: 25px;
  width: 280px;
  height: 2000px;
  float: none;
  margin-top: 0;
  background: #fff;
  z-index: 3; }
  
  .mobile-nav:before {
    content: '';
    height: 4px;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1; }
    
  .mobile-nav > ul > li {
    display: block;
    margin: 0;
    border-bottom: 1px solid #D8D8D8;
    font-size: 12px;
    position: relative;
    transition: all 0.15s;
    cursor: pointer;
    }
    
    .mobile-nav > ul > li.x {
      border-bottom: none;
      background: #fff; }
      
      .mobile-nav > ul > li.x a {
        color: #79bde9; }
        
      .mobile-nav > ul > li.x:before {
        color: #666;
        content: '-';
        top: 8px;
        cursor: pointer; }
        
    .mobile-nav > ul > li a {
      color: #666; }
      
      .mobile-nav > ul > li a:hover {
        color: #79bde9; }
        
    .mobile-nav > ul > li > a {
      padding: 11px 0px 11px 20px;
      font-size: 20px;
      width: 100%;
      display: block; }
      
    .mobile-nav > ul > li > ul li:not(.track) a {
      font-size: 16px;
      font-weight: 500;
      padding-left: 30px; }
      
  .mobile-nav.active {
        display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="m-toggle" class="icon-bars">
  <span></span>
</div>

<nav class="mobile-nav">
  <ul>
    <li><a href="#">Item 01</a></li>
    <li><a href="#">Item 02</a></li>
    <li><a href="#">Item 03</a></li>
    <li><a href="#">Item 04</a></li>
    </ul>
</nav>

单击时不显示移动幻灯片导航

Mobile Slide Navigation Not Appearing on Click

jquery

css

navigation

slidetoggle