BS3菜单切换不会单击父级

时间:2014-09-25 19:02:33

标签: javascript jquery html twitter-bootstrap-3

在桌面视图中,我将鼠标悬停在链接上是有效的。我将鼠标悬停在父母身边,儿童显示,我们可以去。但是,在我的结构中,我将其作为:

<nav class="navbar navbar-static" role="navigation">
  <div class="navbar-header" data-toggle="collapse" data-target=".lower-navbar">
  <div class="row">
    <h2 class="visible-xs mobileHeader col-xs-9">Full Circle Solutions</h2>
    <button type="button col-xs-3>" class="navbar-toggle">
      <span class="sr-only">Toggle Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
          </div><!-- /.navbar-header -->


  <div class="collapse navbar-collapse lower-navbar nav-justified col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">    
    <ul id="menu-main-navigation" class="nav navbar-nav caps"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20 hovernav"><a href="http://optimumcard.dev.com/">Home</a></li>
        <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-19 hovernav"><a href="http://optimumcard.dev.com/about/" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
        <ul class="dropdown-menu depth_0 subMenu">
            <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55 hovernav"><a href="http://optimumcard.dev.com/about/your-optimum-team/">Your Optimum Team</a></li>
            <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54 hovernav"><a href="http://optimumcard.dev.com/about/corporate-responsibility/">Corporate Responsibility</a></li>
        </ul>
        </li>
    </ul>
</div>

Fiddle

这是我的主页关于哪个有孩子项目1,项目2,项目3.现在我可以点击的项目很好,但父母,关于,根本不可点击。当我进入移动视图或平板电脑视图时,它会变得更糟,我可以点击并切换它们,但是我无法点击父级来打开页面。

现在,这是我需要帮助的,我可以接受。主页,将鼠标悬停在上面,我试过一个显示屏:block;切换不起作用。我们尝试了一些js

$(document).ready(function () {

    $('.carousel').carousel({
        interval: 3000,
        pause: "hover"
    });

    $(window).resize(function () {
        var attr = $('.dropdown-toggle').attr('data-toggle');
        if (typeof attr == typeof undefined && attr == false) {
            if ($(window).width() > 767) {
                $('.dropdown-toggle').removeattr('data-toggle');
            }
        } else {
            if ($(window).width() <= 767) {
                $('.dropdown-toggle').attr('data-toggle', 'dropdown');
            }
        }
    });

    $('.dropdown a.dropdown-toggle').on('click', function () {
        if ($(this).parent().hasClass('open')) {
            location.assign($(this).attr('href'));
        });
    }
});

让它在屏幕尺寸上添加属性但无济于事。

我想知道的是如何在移动/平板电脑视图中切换菜单,点击父级,然后在dekstop视图中点击父级。

0 个答案:

没有答案