流星 - 优文库

不工作的JavaScript导航菜单我有这个原型的头在这个Codepen default 流星

expanded

但显然使与我如何代码转移到流星项目是错误的工作。

是的，我也跑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>

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 
    }); 
}

来源

2014-01-28 JGallardo

你运行'MRT添加router'？ “headerNav”模板是什么样的？确保你没有忘记将'header'模板封装在你的Codepen中的'wrapper-dropdown-3' div中。虽然它不是Meteor的做事方式，但你的JS代码看起来是正确的。 – Tobold

@Tobold哦，很好，我没有正确包装divs。我继续修改模板（并更新了问题），并确保我运行了'mrt add router'（它证实了我已经）。但仍然没有工作。难道我需要为该按钮的路径或动作做其他事情吗？ – JGallardo

什么是不工作？你想让路由工作或只是打开并关闭下拉菜单？ – Tobold

我很快就试图运行你的代码，它为我工作正常（打开和关闭菜单）。我希望发布我的代码有助于发现错误。我猜想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>

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'); 
     }); 
    }); 

}

来源

2014-01-29 07:40:35 Tobold

流星

回答

相关问题