Jquery bootstrap 3当带有子菜单的项为“单击并显示子菜单”时隐藏主菜单

我想有一个子菜单只显示和隐藏主菜单后，你点击一个项目，在主菜单有一个子菜单。棘手的是，这只会在手机上激活，而不会在大屏幕上激活。我只尝试了一个插件或从下面的链接实现了一个库，但它在某个地方发生了冲突，菜单没有显示出来。我希望你能给我一个新的方法

我的菜单如下所示： 主菜单显示，当单击带有子菜单的项目时，将隐藏主菜单并仅显示子菜单

以下是最简单的代码

//用于移动屏幕

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链接，用于签入mobile use Chrome并在开发者控制台中更改导航器类型并选择任何移动设备

分享您的代码

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');
})
}