强制函数toolbarInit（）仅触发一次。

Question

强制函数toolbarInit（）仅触发一次。

该课程有2个项目＆＃34; nav＆＃34;。当我点击链接＆＃34;菜单＆＃34;时，我希望两个导航都打开。

现在，该事件运行两次（每个导航一次），因此您可以多次看到slidetoggle运行。所以，而不是打开，关闭和重新打开，我只想让它打开一次。

我不应该使用e.preventDefault（）来阻止函数多次运行吗？

查看我的Codepen

HTML：

<nav id="people-menu" class="nav people-nav">
      <div class="wrap">
        <div class="region region-audience-links">
          <div class="block">
            <div class="content">
              <ul class="row in"><div class="split-left"><li class="first leaf menu-level-1"><a href="/alumni" title="">Alumni</a></li>
                <li class="leaf menu-level-1"><a href="/current-students" title="">Current Students</a></li>
                <li class="leaf menu-level-1"><a href="/faculty" title="">Faculty</a></li>
              </div><div class="split-right"><li class="leaf menu-level-1"><a href="/parents" title="">Parents</a></li>
              <li class="leaf menu-level-1"><a href="/prospective-students" title="">Prospective Students</a></li>
              <li class="last leaf menu-level-1"><a href="/school-counselors" title="">School Counselors</a></li>
            </div></ul>  </div>
          </div>
        </div>
      </div>
    </nav>
    <ul class="header-toolbar-triggers row">
      <li><a href="#global-menu" data-target="nav" class="menu"><span class="icon-menu"></span><span class="nodisplay">Menu</span></a></li>
    </ul>
    <nav id="global-menu" class="global-nav nav" role="navigation">
      <div class="wrap">
        <div class="in">
          <div class="region region-header">
            <div id="block-menu-menu-primary-menu" class="block block-menu">
              <div class="content">
                <ul class="menu"><li class="first leaf"><a href="/about" title="">About</a></li>
                  <li class="leaf"><a href="/admissions" title="">Admissions</a></li>
                  <li class="leaf"><a href="/financial-aid" title="">Financial Aid</a></li>
                  <li class="leaf"><a href="/academics" title="">Academics</a></li>
                  <li class="last leaf"><a href="/student-residentiallife" title="">Student &amp; Residential Life</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>

使用Javascript / JQuery的

function toolbarRespond() {
  if ($(window).innerWidth() < 795) {
    $('.nav').hide();    
  }
}

function toolbarInit() {
  $('.header-toolbar-triggers a').on('click', function(e) {    
    var toolbarTarget = $(this).attr('data-target');
    $('.'+toolbarTarget).slideToggle(500);    
    e.preventDefault();
  });
}


$(document).ready(function() {
  toolbarRespond();
  toolbarInit();

  window.onresize = function(event) {
    toolbarRespond();
    toolbarInit();
  }
});

Answer 1

preventDefault()方法仅停止浏览器执行事件的默认操作。在这种情况下，该操作将遵循指向其位置的链接。您拨打e.preventDefault()的电话是浏览器未导航至#global-menu网址的原因。

您看到多次运行绑定功能的原因是您多次运行toolbarInit() - 从而多次绑定点击。您可以在文档就绪时运行它，但是每次窗口调整大小时都会将其绑定运行。

在简单的示例代码中，无需在调整窗口大小时运行toolbarInit()。如果您的真实代码更复杂，则需要将click绑定分开，并在调整大小时停止调用它。

使用e.preventDefault（）限制事件

强制函数toolbarInit（）仅触发一次。

1 个答案: