2

我正在使用一个 3 级下拉菜单,它本身可以正常工作,但是在添加到我的 magento 模板时会发生冲突。我添加了 $.noConflict(true); 这解决了一些问题,但是我仍然收到 Uncaught Typeerror,而且下拉列表的第 3 级没有显示。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">

             <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active">
            <a id="dropdown-toggle" data-toggle="dropdown" href="#">Shop A-Z</a>
            <!--
              jQuery-menu-aim: this <ul> defines the dropdown main menu and its contents.
              This is just one of many possible examples for defining the menu's HTML.
              jQuery-menu-aim is agnostic to your HTML structure, it only fires events to
              be used as you please.
            -->
            <ul class="dropdown-menu" role="menu">
                <li data-submenu-id="submenu-patas">
                    <a href="#">Patas</a>
                    <!--
                      jQuery-menu-aim: each class="popover" div defines submenu content. There are a million
                      and one ways to do this, places to structure the HTML, etc. This is just one example.
                      jQuery-menu-aim is agnostic to your HTML structure, it only fires events to be used
                      as you please.
                    -->
                    <div id="submenu-patas" class="popover">
                        <h3 class="popover-title">Patas</h3>
                        <div class="popover-content"><img src="media/img/patas.png"></div>
                    </div>
                </li>
                <li data-submenu-id="submenu-snub-nosed">
                    <a href="#">Golden Snub-Nosed</a>
                    <div id="submenu-snub-nosed" class="popover">
                        <h3 class="popover-title">Golden Snub-Nosed</h3>
                        <div class="popover-content"><img src="media/img/snub-nosed.png"></div>
                    </div>
                </li>
                <li data-submenu-id="submenu-duoc-langur">
                    <a href="#">Duoc Langur</a>
                    <div id="submenu-duoc-langur" class="popover">
                        <h3 class="popover-title">Duoc Langur</h3>
                        <div class="popover-content"><img src="media/img/duoc-langur.png"></div>
                    </div>
                </li>
                <li data-submenu-id="submenu-pygmy">
                    <a href="#">Baby Pygmy Marmoset</a>
                    <div id="submenu-pygmy" class="popover">
                        <h3 class="popover-title">Baby Pygmy Marmoset</h3>
                        <div class="popover-content"><img src="media/img/pygmy.png"></div>
                    </div>
                </li>
                <li data-submenu-id="submenu-tamarin">
                    <a href="#">Black Lion Tamarin</a>
                    <div id="submenu-tamarin" class="popover">
                        <h3 class="popover-title">Black Lion Tamarin</h3>
                        <div class="popover-content"><img src="media/img/tamarin.png"></div>
                    </div>
                </li>
                <li data-submenu-id="submenu-monk">
                    <a href="#">Monk Saki</a>
                    <div id="submenu-monk" class="popover">
                        <h3 class="popover-title">Monk Saki</h3>
                        <div class="popover-content"><img src="media/img/monk.png">    </div>
                    </div>
                </li>
                <li data-submenu-id="submenu-gabon">
                    <a href="#">Gabon Talapoin</a>
                    <div id="submenu-gabon" class="popover">
                        <h3 class="popover-title">Gabon</h3>
                        <div class="popover-content"><img src="media/img/gabon.png"></div>
                    </div>
                </li>
                <li data-submenu-id="submenu-grivet">
                    <a href="#">Grivet</a>
                    <div id="submenu-grivet" class="popover">
                        <h3 class="popover-title">Grivet</h3>
                        <div class="popover-content"><img src="media/img/grivet.png"></div>
                    </div>
                </li>
                <li data-submenu-id="submenu-red-leaf">
                    <a href="#">Red Leaf</a>
                    <div id="submenu-red-leaf" class="popover">
                        <h3 class="popover-title">Red Leaf</h3>
                        <div class="popover-content"><img src="media/img/red-leaf.png"></div>
                    </div>
                </li>
                <li data-submenu-id="submenu-king-colobus">
                    <a href="#">King Colobus</a>
                    <div id="submenu-king-colobus" class="popover">
                        <h3 class="popover-title">King Colobus</h3>
                        <div class="popover-content"><img src="media/img/colobus.png"></div>
                    </div>
                </li>
            </ul>
          </li>
        </ul>
         </div>
       </div>
      </div>
    </div>

javascript 代码位于模板底部之前

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
 <script src="js/jquery/jquery.menu-aim.js" type="text/javascript"></script>
 <script src="js/bootstrap.min.js" type="text/javascript"></script>
 <script>
   $.noConflict(true);
   var $menu = $(".dropdown-menu");

    // jQuery-menu-aim: <meaningful part of the example>
    // Hook up events to be fired on menu row activation.
    $menu.menuAim({
        activate: activateSubmenu,
        deactivate: deactivateSubmenu
    });
    // jQuery-menu-aim: </meaningful part of the example>

    // jQuery-menu-aim: the following JS is used to show and hide the submenu
    // contents. Again, this can be done in any number of ways. jQuery-menu-aim
    // doesn't care how you do this, it just fires the activate and deactivate
    // events at the right times so you know when to show and hide your submenus.
    function activateSubmenu(row) {
        var $row = $(row),
            submenuId = $row.data("submenuId"),
            $submenu = $("#" + submenuId),
            height = $menu.outerHeight(),
            width = $menu.outerWidth();

        // Show the submenu
        $submenu.css({
            display: "block",
            top: -1,
            left: width - 3,  // main should overlay submenu
            height: height - 4  // padding for main dropdown's arrow
        });

        // Keep the currently activated row's highlighted look
        $row.find("a").addClass("maintainHover");
    }

    function deactivateSubmenu(row) {
        var $row = $(row),
            submenuId = $row.data("submenuId"),
            $submenu = $("#" + submenuId);

        // Hide the submenu and remove the row's highlighted look
        $submenu.css("display", "none");
        $row.find("a").removeClass("maintainHover");
    }

    // Bootstrap's dropdown menus immediately close on document click.
    // Don't let this event close the menu if a submenu is being clicked.
    // This event propagation control doesn't belong in the menu-aim plugin
    // itself because the plugin is agnostic to bootstrap.
    $(".dropdown-menu li").click(function(e) {
        e.stopPropagation();
    });

    $(document).click(function() {
        // Simply hide the submenu on any click. Again, this is just a hacked
        // together menu/submenu structure to show the use of jQuery-menu-aim.
        $(".popover").css("display", "none");
        $("a.maintainHover").removeClass("maintainHover");
    });


   </script>
        </div>
   </div>
   </body>
4

2 回答 2

0

Getting nullfrom$(".dropdown-menu");意味着它不是由 jQuery 呈现的,而是由其他一些库呈现的,看起来你没有.noConflict正确使用。

试试这个:

$.noConflict(true);
var $menu = jQuery(".dropdown-menu");
//...
于 2013-09-03T14:58:23.680 回答
0

我做了这个...

jQuery.noConflict();
(function( $ ) {
var $menu = $(".dropdown-menu");

//Rest of my code//

})( jQuery );

然后一切都很好!

于 2013-09-03T15:44:11.473 回答