Question

我已阅读有关jQuery切换导航的所有问题，但未找到我的具体问题。我刚刚结识了jQuery，并且正在使用其他人编写的导航系统。我需要这个用于我正在制作的“响应式”网站。当用户的屏幕宽度足够小时，此版本的站点菜单将接管。顶部有一个“菜单”按钮，单击该按钮时会出现下拉菜单。这就是问题：大多数时候导航系统工作正常 - 它可以节省屏幕空间，因为当用户点击另一个项目时，第二级项目会自动消失，因此它不会一直向下拉伸智能手机屏幕但在使用一段时间后，它就会出现故障。对单击按钮没有任何反应，或者单击会导致菜单立即打开和关闭。如果我关闭浏览器，有时这可以解决问题。但显然我不能拥有一个只能部分工作的网站导航系统。我已经写信给作者寻求帮助，但到目前为止还没有听到任何消息。任何帮助将不胜感激。

以下是HTML的相关内容：

<div id="pattern" class="pattern">
<button class="menu-link">Menu <span>&#9660;</span></button>
<nav id="menu" class="menu" role="navigation">
<ul class="level-1">
    <li class="has-subnav"><a href="#">Parent #1</a>
        <ul class="level-2">
        <li><a href="#">Child #1</a></li>
        <li><a href="#">Child #2</a></li>
        </ul>
    </li>
    <li><a href="#">Parent #2</a>
    </li>
</ul>
</nav></div>

以下是相关的CSS：

.menu-link {
  display: block;
  border: none;
  padding: 1em;
  width: 100%;
  text-align: right;
}
.menu {
  display: none;
 }
.menu, .menu > ul ul {
  clear: both;
}
.js .menu, .js .menu > ul ul {
  background: rgba(0,0,0,0.1);
}
.menu.active, .js .menu > ul ul.active {
  max-height: 55em;
}
.menu > ul {
  border-top: 1px solid #808080;
}
.menu li a {
  color: #000;
  display: block;
  padding: 0.8em;
  border-bottom: 1px solid #808080;
  position: relative;
}
.menu li.has-subnav > a:after {
   content: '+';
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  font-size: 1.5em;
  padding: 0.25em 0.5em;
}
.menu li.has-subnav > a.active:after {
  content: "-";
}
.has-subnav > ul {
  display: none;
}
enter code here

这是jQuery（我把它放在一个单独的文件中，在关闭的body标签之前调用 - 就像导航系统的作者那样）：

$('#pattern').on('click','.menu-link', function() {
  $('.menu').slideToggle('fast', function() {
    if($('.menu').is(':visible')) {
            $('.menu-link span').html('&#9650;');
        } else {
            $('.menu-link span').html('&#9660;');
        }
    });
});

$('.menu').on('click', '.has-subnav a', function() {
    if ($(window).width() < 772 || $('html').hasClass('touch')) {
        if ($(this).next('ul').is(':visible')) {
            $(this).next('ul').slideUp('fast');
            $(this).removeClass('active');
        } else {
            $(this).closest('ul').find('.active').next('ul').slideUp('fast');
            $(this).closest('ul').find('.active').removeClass('active');
            $(this).next().slideToggle('fast');
            $(this).addClass('active');
        }
    }
    });

jQuery切换导航

0 个答案: