Question

大家好，我的代码有问题。在重新指向菜单页面之前，我试图等待一些课程。我使用的是preventDefault。它不起作用。或者我的菜单关闭后如何进行测试警报。我测试了我的选择器。

现在，当我点击链接时，它无处可寻......：）

`$('.menu-item a').click(function(event) {
  event.preventDefault();
  var href = $(this).attr('href');
    $('.menu-item').addClass('menu-trigger', function(){
      window.location = href; 
    });
});`

我的HTML代码。也许问题是href链接来自WP？

<div class="menu-nasicomy-menu-container">
<ul id="super-set-menu" class="primary-menu">
    <li id="menu-item-1049" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1049"><a href="http://www.example.lt/Link-01/">Link 01</a></li>
    <li id="menu-item-1050" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1050"><a href="http://www.example.lt/Link-02/">Link 02</a></li>
    <li id="menu-item-1051" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1051"><a href="http://www.example.lt/Link-03/">Link 03</a></li>
    <li id="menu-item-1052" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1052"><a href="http://www.example.lt/Link-04/">Link 04</a></li>
    <li id="menu-item-1053" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1053"><a href="http://www.example.lt/Link-05/">Link 05</a></li>
    <li id="menu-item-1054" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1054"><a href="http://www.example.lt/Link-06/">Link 06</a></li>
</ul>

Answer 1

您正在以错误的方式调用addClass，使用addClass调用函数只能将参数作为函数.addClass( function )。

返回一个或多个以空格分隔的类名的函数添加到现有的班级名称

有关详情，请参阅.addClass( function ) Documntation

＆＃13;

$('.menu-item a').click(function(event) {
  event.preventDefault();
  var href = $(this).attr('href');
  $('.menu-item').addClass(function() {
    window.location = href;
    return "menu-trigger";
  });

  alert("Still here");
});

＆＃13;

.menu-trigger {
  font-size: 150%;
  color: yellow;
  background-color: coral;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-nasicomy-menu-container">
  <ul id="super-set-menu" class="primary-menu">
    <li id="menu-item-1049" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1049"><a href="http://www.example.lt/Link-01/">Link 01</a></li>
    <li id="menu-item-1050" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1050"><a href="http://www.example.lt/Link-02/">Link 02</a></li>
    <li id="menu-item-1051" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1051"><a href="http://www.example.lt/Link-03/">Link 03</a></li>
    <li id="menu-item-1052" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1052"><a href="http://www.example.lt/Link-04/">Link 04</a></li>
    <li id="menu-item-1053" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1053"><a href="http://www.example.lt/Link-05/">Link 05</a></li>
    <li id="menu-item-1054" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1054"><a href="http://www.example.lt/Link-06/">Link 06</a></li>
  </ul>

＆＃13;

Answer 2

我相信您正在尝试添加一个类来执行类似页面之间渐弱过渡的操作，这就是我在某些项目中使用的代码。通常我会用课堂淡出身体。

$('.menu-item a').click(function(event) {
    var href = $(this).attr('href');
    event.preventDefault();
    $('.menu-item').addClass('menu-trigger');
    window.setTimeout(function(){
        window.location.href=href;
    }, 500); // this is the counter for the settimeout function
});

的preventDefault。在转到链接之前等待菜单动画

2 个答案: