手风琴菜单的JavaScript代码

时间:2016-09-02 16:28:23

标签: javascript jquery

(终于解决了)当每个人都告诉你代码是好的甚至演示它,然而它在你的位置上不起作用,而不是你可能犯了一个微不足道的错误。我是jQuery,menumaker和最后我的本地脚本应该被调用的顺序(这是上面的顺序),而不是任何其他顺序。

<script src="/scripts/jquery-1.12.0.min.js"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
<script src="/scripts/01_MainMenu.js"></script>

谷歌Chrome调试器指出了这个错误,我直到现在才使用它,但从现在开始肯定会使用。

(更新)感谢您的所有答案。对jQuery的引用存在于jQuery的本地副本中: <script src="/scripts/jquery-1.12.0.min.js"></script> 我也尝试使用链接gavgrif建议的脚本,但不幸的是,它仍然无法正常工作。

但是我在Mozilla Firefox调试器中收到以下错误:

消息:未定义jQuery。

Firefox Debugger error message

错误消息引用脚本中的最后一行(26),即包含“(jQuery)”的行。

(原帖)

我从CSS MenuMaker收到了这个脚本,它应该是一个带有子菜单扩展/收缩的手风琴菜单。但是我不明白最后的(jQuery)位,以及为什么整个脚本位于圆括号之间。我是一个JavaScript新手。

显然,脚本无效。

(function($){
  $(document).ready(function(){

    $('#main_menu ul ul li:odd').addClass('odd');
    $('#main_menu ul ul li:even').addClass('even');
    $('#main_menu > ul > li > a').click(function() {
      $('#main_menu li').removeClass('active');
      $(this).closest('li').addClass('active'); 
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
      }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#main_menu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
      }
      if($(this).closest('li').find('ul').children().length == 0) {
        return true;
      } else {
        return false;   
      }     
    });

  });
})(jQuery);

HTML:

   <div id="main_menu">
   <ul>
      <li class="active"><a href="../Main.php">Home</a></li>
      <li><a href="/pages/04_Taxonomy.php">Taxonomy</a></li>
      <li><a href="/pages/01_PlantList.php">Virtual Herbarium</a></li>
      <li><a href="/pages/03_PlantData.php">Data Repository</a></li>
      <li class="has-sub"><a href="#">Sources</a>
         <ul>
            <li><a href="/pages/072_Surse_Books.php">Books</a></li>
            <li><a href="/pages/073_Surse_Journals.php">Journals</a></li>
         </ul>
      </li>
      <li><a href="#">Habitats</a></li>
      <li><a href="#">Endangered species</a></li>
      <li><a href="#">Papers</a></li>
   </ul>
   </div>

相应的CSS很长。如果需要,我会发布,但我个人认为不是。

2 个答案:

答案 0 :(得分:1)

如果任何其他脚本使用“$”代码中的任何其他内容,则整个想法是“保护”此脚本。所以这是一个完全有效的脚本。

要使用的'常规'jQuery对象是'jQuery'。但'$'可以用作捷径。 不幸的是,其他一些框架也使用'$'。如果您要使用此类框架,则此脚本将无法再使用。

所以:

Prism pipeline init order: 
es2 
sw 
Using native-based Pisces rasterizer
Using dirty region optimizations
Using system sized mask for primitives
Not forcing power of 2 sizes for textures
Using hardware CLAMP_TO_ZERO mode
Opting in for HiDPI pixel scaling
Prism pipeline name = com.sun.prism.es2.ES2Pipeline
Loading ES2 native library ... prism_es2_monocle succeeded.
GLFactory using com.sun.prism.es2.MonocleGLFactory 
com.sun.glass.ui.monocle.GLException: 0x3005: Could not get EGL surface
at com.sun.glass.ui.monocle.AcceleratedScreen.<init>(AcceleratedScreen.java:110)
at com.sun.glass.ui.monocle.NativePlatform.getAcceleratedScreen(NativePlatform.java:127)
at com.sun.prism.es2.MonocleGLFactory.initialize(MonocleGLFactory.java:107)
at com.sun.prism.es2.ES2Pipeline.<clinit>(ES2Pipeline.java:81)
at java.lang.Class.forName0(Native Method)
at java.lang.Class.forName(Class.java:264)
at com.sun.prism.GraphicsPipeline.createPipeline(GraphicsPipeline.java:187)
at com.sun.javafx.tk.quantum.QuantumRenderer$PipelineRunnable.init(QuantumRenderer.java:91)
at com.sun.javafx.tk.quantum.QuantumRenderer$PipelineRunnable.run(QuantumRenderer.java:124)
at java.lang.Thread.run(Thread.java:745)
(X) Got class = class com.sun.prism.es2.ES2Pipeline
GraphicsPipeline.createPipeline: error initializing pipeline com.sun.prism.es2.ES2Pipeline
*** Fallback to Prism SW pipeline
Prism pipeline name = com.sun.prism.sw.SWPipeline
(X) Got class = class com.sun.prism.sw.SWPipeline
Initialized prism pipeline: com.sun.prism.sw.SWPipeline
 vsync: true vpipe: false
Loading Prism common native library ...
succeeded.

预防。这就是(这很简单)。 它声明了一个带参数的匿名函数。此参数称为$(可以称为 param1 或其他内容)。 然后,它只使用变量'jQuery'调用函数,这是jQuery对象(全局定义)。

这类似:

(function($){

//Code using '$'

})(jQuery)

我希望有所帮助。

答案 1 :(得分:1)

关于脚本无效 - 我只是将您的代码复制到此代码段中以回答它并且它可以正常工作 - 单击“源”链接打开并按预期关闭子菜单。如果它不适合你,那么我怀疑你没有将jquery库包含在文档的头部。

尝试添加

(function($){
  $(document).ready(function(){

    $('#main_menu ul ul li:odd').addClass('odd');
    $('#main_menu ul ul li:even').addClass('even');
    $('#main_menu > ul > li > a').click(function() {
      $('#main_menu li').removeClass('active');
      $(this).closest('li').addClass('active'); 
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
      }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#main_menu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
      }
      if($(this).closest('li').find('ul').children().length == 0) {
        return true;
      } else {
        return false;   
      }     
    });

  });
})(jQuery);

进入头部,看它是否有效。对于论坛的其他部分 - 是的,这应该是一个评论 - 但我想通过代码片段证明代码与添加代码段有关:)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="main_menu">
   <ul>
      <li class="active"><a href="../Main.php">Home</a></li>
      <li><a href="/pages/04_Taxonomy.php">Taxonomy</a></li>
      <li><a href="/pages/01_PlantList.php">Virtual Herbarium</a></li>
      <li><a href="/pages/03_PlantData.php">Data Repository</a></li>
      <li class="has-sub"><a href="#">Sources</a>
         <ul>
            <li><a href="/pages/072_Surse_Books.php">Books</a></li>
            <li><a href="/pages/073_Surse_Journals.php">Journals</a></li>
         </ul>
      </li>
      <li><a href="#">Habitats</a></li>
      <li><a href="#">Endangered species</a></li>
      <li><a href="#">Papers</a></li>
   </ul>
   </div>
{{1}}