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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了点击时不会显示移动幻灯片导航相关的知识,希望对你有一定的参考价值。

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

我在下面发布了我的代码,但也有一个小提琴设置,包括与网站上使用的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();
    });
答案

你需要为top调整你的right.mobile-nav

希望这是你想要的。如果需要,很乐意解释或帮助提供更好的解决方案。

$('#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>

以上是关于点击时不会显示移动幻灯片导航的主要内容,如果未能解决你的问题,请参考以下文章

从一个片段移动到另一个片段时如何自动选择底部导航?

选择导航菜单项时不会替换上一个片段

想要使用片段从导航抽屉活动移动到另一个屏幕,以在所有屏幕上显示抽屉

视频没有在片段 ViewPager 中暂停

光滑的旋转木马移动导航点

使用导航控制器按下后退按钮后,如何防止先前的片段出现?