bootstrap 3当具有子菜单的项目单击并显示子菜单时,隐藏主菜单

Question

我想只显示一个子菜单,并在主菜单中单击具有子菜单的项目后隐藏主菜单.棘手的部分是,这只会在移动设备中激活,而不会在更大的屏幕中激活.我只尝试了一个插件或从下面的链接实现了一个库,它在某个菜单没有显示的地方发生了冲突.我希望你能给我一个新方法.

http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/

我的菜单如下所示:主菜单显示,当点击带子菜单的项目时,它隐藏主菜单并仅显示子菜单.

    <div class="navbar navbar-default ">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- <a class="navbar-brand" href="#">
                <img src="assets/img/vivaldi-logo.png" alt="" class="img-responsive" />
            </a> -->
        </div>
        <div class="navbar-collapse collapse ">
            <ul class="nav navbar-nav dl-menu">
                <li>
                    <a href="index.html" class="home">HOME</a>
                </li>
                <li class="dropdown open">
                        <a id="whoweare" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="true">WHO WE ARE</a>
                        <ul class="dropdown-menu">
                            <img src="assets/img/menutri.png" style="margin-top: -18px; margin-left: 20px;">
                            <li><a href="#">PATIENT FORMS</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#">FREE CONSULTATION</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#">INSURANCE</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#">OUR STORY</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#">PHYSICIANS</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#">STAFF</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#">TESTIMONIALS</a></li>
                            <!-- <li class="divider"></li> -->
                            <li><a href="#" style="border-bottom-width: 0px;">THE OSTEOPATHIC WAY</a></li>
                        </ul>
                </li>
                <li>
                    <a href="blog.html">SERVICES</a>
                </li>
                <li>
                    <a href="contact.html">WELLNESS CENTER</a>
                </li>
                <li>
                    <a href="contact.html">NEWS &#38; EVENTS</a>
                </li>
                <li>
                    <a href="contact.html">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 1

这是最简单的代码

// 适用于手机屏幕

CSS

@media(max-width:768px){
    .dropdown-menu{
          position: absolute;
      top: 0;
      bottom: 0;
      background-color: #ddd;
      min-height: 100%;

    }
}

jQuery

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // for mobile users..
    $('.dropdown').click(function(e){
    e.preventDefault()
    $(this).siblings().addClass('hide');
    $(this).find('a.dropdown-toggle').addClass('hide');

})

$('.navbar-toggle').click(function(e){
    e.preventDefault();
    $('.navbar-collapse').find('.hide').removeClass('hide');
})
}

这是 JSFIDDLE 链接JSFIDDLE，用于检查移动设备使用 Chrome 并在开发人员控制台中更改导航器类型并选择任何移动设备