Question

我使用bootstrap 3.4作为响应式菜单。

我想在用户点按"product"时显示子菜单，但父菜单会在点按时消失。

这是一个显示问题的GIF：

我的代码：

<nav class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
<ul class="nav navbar-nav">
    <li class="hidden">
        <a href="#page-top"></a>
    </li>
    <li class="dropdown">
        <a id="translate01" href="#" class="dropdown-toggle move multiselect" data-toggle="collapse" data-target=".navbar-collapse" role="button" aria-haspopup="false" aria-expanded="false">Product</a>
        <ul class="dropdown-menu" role="menu">
            <li><a class="page-scroll move" href="#product">Description</a></li>
            <li role="separator" class="divider"></li>
            <li><a id="translate39" class="page-scroll move" href="#compat">Compatibility</a></li>
            <li role="separator" class="divider"></li>
            <li><a id="translate02" class="page-scroll move" href="#diapo">Gallery</a></li>
        </ul>    
    </li>
    <li><a id="translate48" class="page-scroll move" href="#calendrier">Timeline</a></li>
    <li><a id="translate03" class="page-scroll move" href="#team">Founder</a></li>
    <li><a class="page-scroll move" href="#contact">Contact</a></li>
    <li><a id="popup-shop" class="move" href="javascript://">Funding</a></li>
    <li><a class="forum move" href="/forum/index.php" target="_blank">Forum</a></li>
</ul>

css，显示子菜单（描述，兼容性等）：

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}
.navbar .dropdown-menu {
 margin-top: 0px;
 }

所以，我的问题：我可以添加一个javascript来阻止菜单，点击＆＃34;产品＆＃34; ？

我试过这个，但我不知道这个方法是否合适：

<script type="text/javascript">
        $("body").on('click','.dropdown',function(event){
            /* alert("Product clicked"); */ /* works well */
            event.stopPropagation();  /* the menu still disapear */
            });
</script>

＆＃13;

ul.nav li.dropdown:hover>ul.dropdown-menu {
  display: block;
}

@media (min-width: 979px) {
  ul.nav li.dropdown:hover>ul.dropdown-menu {
    display: block;
  }
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body id="page-top" class="index">

  <!-- Navigation  -->
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
        <a class="navbar-brand page-scroll" href="#page-top" style="width:250px;"><img src="img/logo2.png" width="60%" style="margin-top: -4%;"></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <nav class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
        <ul class="nav navbar-nav">
          <li class="hidden">
            <a href="#page-top"></a>
          </li>
          <li class="dropdown">
            <a id="translate01" href="#" class="dropdown-toggle move multiselect" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Product</a>
            <ul class="dropdown-menu" role="menu">
              <li><a class="page-scroll move" href="#product">Description</a></li>
              <li role="separator" class="divider"></li>
              <li><a id="translate39" class="page-scroll move" href="#compat">Compatibility</a></li>
              <li role="separator" class="divider"></li>
              <li><a id="translate02" class="page-scroll move" href="#diapo">Gallery</a></li>
            </ul>
          </li>
          <li><a id="translate48" class="page-scroll move" href="#calendrier">Timeline</a></li>
          <li><a id="translate03" class="page-scroll move" href="#team">Founder</a></li>
          <li><a class="page-scroll move" href="#contact">Contact</a></li>
          <li><a id="popup-shop" class="move" href="javascript://">Funding</a></li>
          <li><a class="forum move" href="/forum/index.php" target="_blank">Forum</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a id="flagA" class="navbar-brand" href="javascript:doTranslate('fr')" style="width:80px;"><img id="flag0" onclick="javascript:changeImage('fra')" src="img/France-Flag-50.png" class='changer' width="55%" style="margin-top: -4%;"></a>
          </li>
          <li>
            <a id="flagB" class="navbar-brand" style="width:80px;"><img id="flag1" src="img/UK-Flag.png" class='changer' width="55%" style="margin-top: -4%;"></a>
          </li>
        </ul>
      </nav>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></div>
      <div id="successn"></div>
  </nav>

＆＃13;

Bootstrap子菜单触摸问题

0 个答案: