Question

我有这个标题的原型工作Codepen default

expanded

但显然我错误地将此代码传输到Meteor项目。

是的，我确实运行了mrt install jquery

模板

<template name="headerWrapper">
  <div id="dd" class="wrapper-dropdown-3 dd" tabindex="1">   
    {{> header}}
    {{> headerNav}}
  </div>
</template>

<template name="header">
  <div class="header">
    <div class="headerLogo">
      <a href="/">BruxZir</a>
    </div>
    <div class="headerMenu">
      <a href="#" class="dd">&equiv;</a>
    </div>
  </div>
</template>

<template name="headerNav">
  <div class="headerNav"> 
    <ul class="dropdown">
      <li class="findLabLink">
        <a href="{{labsPath}}">Find An Authorized Lab</a>
      </li>  
      <li class="headerContact">
        <a href="#">Contact Us<i class="fa fa-envelope fa-lg"></i></a>
      </li>
      <li>
        <a href="{{featuresPath}}">Features<i class="fa fa-caret-right right"></i></a>
      </li>
      <li>
        <a href="{{sciencePath}}">Science<i class="fa fa-caret-right right"></i></a>
      </li>
      <li>
        <a href="{{videosPath}}">Videos<i class="fa fa-caret-right right"></i></a>
      </li>
    </ul>        
  </div>
</template>

JS

if (Meteor.isClient) {

  Meteor.Router.add({
    '/': 'home',

    '/features': 'features',
    '/science': 'science',
    '/videos': 'videos',
    '/cases': 'cases',
    '/testimonials': 'testimonials',
    '/labs': 'labs',
    '/contact': 'contact',

    '/posts/:id': function(id) {
      Session.set('postId', id);
      return 'post';
    }
  });

  // all of this is for the menu
  function WTF() {
    window.location.href = "";
  }

  function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
  }
  DropDown.prototype = {
    initEvents: function () {
        var obj = this;
        obj.dd.on('click', function (event) {
            event.stopPropagation();
            if (event.target.className === 'dd') {
                $(this).toggleClass('active');

            }
            return false;

        });
    }
}
$(function () {
    var dd = new DropDown($('#dd'));

    $(document).click(function () {

        // all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
    });
});

}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Answer 1

我很快就尝试运行你的代码，它对我来说很好（打开和关闭菜单）。我希望发布我的代码有助于发现错误。我猜HTML的问题是因为我没有对JS做任何更改但是必须稍微更改一下HTML（添加了正文，也许你只是忘了它？）。

HTML

<head>
  <title>menu</title>
</head>

<body>
  {{> page}}
</body>

<template name="page">
 <div id="dd" class="wrapper-dropdown-3 dd" tabindex="1">
  {{> header}}
  {{> headerNav}}
</div>
</template>

<template name="header">
  <div class="header">
    <div class="headerLogo">
      <a href="/">BruxZir</a>
    </div>
    <div class="headerMenu">
      <a href="#" class="dd">&equiv;</a>
    </div>
  </div>
</template>


<template name="headerNav">
    <div class="headerNav"> 
            <ul class="dropdown">
              <li class="findLabLink">
                <a href="#">Find An Authorized Lab</a>
              </li>  
              <li class="headerContact">
                <a href="#">Contact Us<i class="fa fa-envelope fa-lg"></i></a>
              </li>
              <li class="menuLink">
                <a href="#">Features<i class="fa fa-caret-right right"></i></a>
              </li>
              <li class="menuLink">
                <a href="#">Science<i class="fa fa-caret-right right"></i></a>
              </li>
              <li class="menuLink">
                <a href="#">Videos<i class="fa fa-caret-right right"></i></a>
              </li>
            </ul>        
      </div> <!-- headerNav -->
</template>

JS

if (Meteor.isClient) {

  // since you are not using routing at the moment you can also remove this
  Meteor.Router.add({
    '/': 'home',

    '/features': 'features',
    '/science': 'science',
    '/videos': 'videos',
    '/cases': 'cases',
    '/testimonials': 'testimonials',
    '/labs': 'labs',
    '/contact': 'contact',

    '/posts/:id': function(id) {
      Session.set('postId', id);
      return 'post';
    }
  });
  // ---

  function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
  }
  DropDown.prototype = {
    initEvents: function () {
        var obj = this;
        obj.dd.on('click', function (event) {
            event.stopPropagation();
            if (event.target.className === 'dd') {
                $(this).toggleClass('active');

            }
            return false;

        });
        }
    }
    $(function () {
        var dd = new DropDown($('#dd'));

        $(document).click(function () {

            // all dropdowns
            $('.wrapper-dropdown-3').removeClass('active');
        });
    });

}

JavaScript导航菜单在Meteor中不起作用

1 个答案: