3级子菜单时导航栏消失

时间:2019-05-08 20:55:26

标签: twitter-bootstrap-3 navbar submenu

我的3级导航栏遇到问题。我没有1级和2级的问题,但是第三级已经消失了,无法单击任何链接(例如:古巴,美国或夏威夷)

<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Step 1</a>
            <ul class="dropdown-menu" role="menu">
              <li class="dropdown dropdown-submenu"><a href="page_USA.html" class="dropdown-toggle" data-toggle="dropdown">Step 2</a>
                <ul class="dropdown-menu">
                  <li class="dropdown-submenu"><a  href="page_nofound.html" class="dropdown-toggle" data-toggle="dropdown">Step 3</a>
                    <ul class="dropdown-menu">
                      <li><a  href="Cuba.html">Cuba</a></li>
                      <li><a href="USA.html">Etats Unis</a></li>
                      <li><a  href="Hawai.html">Hawaii</a></li>
                    </ul>
                  </li>

以及相关脚本:

<script>
    $('ul.dropdown-menu [data-toggle=dropdown]').on('mouseover', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // If a menu is already open we close it
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    $(this).parent().addClass('open');

    var menu = $(this).parent().find("ul");
    var menupos = menu.offset();

    if ((menupos.left + menu.width()) + 30 > $(window).width()) {
        var newpos = - menu.width();      
    } else {
        var newpos = $(this).parent().width();
    }
    menu.css({ left:newpos });

});
    </script>

如果您有任何建议,

罗宾

0 个答案:

没有答案