尝试在网站上的http://multi-level-push-menu.make.rs中实现多级推送菜单

Question

我正在尝试在由Perl驱动的页面中实现多级推送菜单： http://find-where.com/cgi-bin/perl_modules/installed_modules.cgi

我不是JS专家，但知道如何使用/实现简单的JS;但在这种情况下，我被卡住了。我认为它与jQuery有关，我并不精通。

我的问题是链接不起作用。我希望链接在页面内的iframe中打开。

但是，如果我在同一个链接上“在新标签/窗口中打开”，它们的工作就可以了！

但点击链接无效！

Answer 1

在您当前的设置中，javascript在加载jQuery之前运行：

<script type="text/javascript">
$(document).ready(function () {
    /* lots of stuff snipped */
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

这会给你错误

  

Uncaught ReferenceError: $ is not defined

要解决此问题，您需要在引用$（$是jQuery的别名）的代码开始之前加载jQuery 。

在文档内容的末尾，在</body>标记上方，添加jQuery脚本源，然后添加其余的javascript。理想情况下，如果没有加载CDN版本，您应该拥有本地版本的jQuery。假设您在/mlpushmenu/jquery-1.10.2.min.js中有副本;您可以检查是否定义了window.jQuery（即jQuery是否已从CDN加载），如果没有，则将本地jQuery文件的源添加到页面。添加其他库，然后添加代码以在iframe中加载链接。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery ||
    document.write('<script src="/mlpushmenu/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="/mlpushmenu/jquery.multilevelpushmenu.min.js"></script>
<!-- any other js libraries here -->
<script>
  $(document).ready(function () {
    $( '#menu' ).multilevelpushmenu({
    onItemClick: function() {
        // First argument is original event object
        var event = arguments[0],
            // Second argument is menu level object containing clicked item (<div> element)
            $menuLevelHolder = arguments[1],
            // Third argument is clicked item (<li> element)
            $item = arguments[2],
            // Fourth argument is instance settings/options object
            options = arguments[3];

        // Anchor href
        var itemHref = $item.find( 'a:first' ).attr( 'href' );
        // Redirecting the page: replace the `src` URL for the iframe showPerlDoc
        // with the URL of the item.
        $('#showPerlDoc').attr('src', itemHref);
      }
    });
  });
</script>

这是代码正常的JSFiddle。

Answer 2

我刚刚通过在false的mlpm init调用中设置两个参数来解决同样的问题：

preventItemClick: false,
preventGroupItemClick: false,