Question

这是我的html文件。我不知道为什么即使没有选择下拉菜单，菜单总是始终处于活动状态！

<!DOCTYPE html>
<head>
  
  
  <link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap-reboot.min.css">
  <link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/tether/tether.min.css">
  <link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/theme/css/style.css">
  <link rel="preload" as="style" href="http://arisk-icelab.polito.it/engine/static/assets/mobirise/css/mbr-additional.css">
  <link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/mobirise/css/mbr-additional.css" type="text/css">
  <link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/print.css">
  
<style>
  

 
  .home {
        padding: 5rem 0 10rem 0;
        background: url('http://arisk-icelab.polito.it/engine/static/assets/images/Slide_ARISK.JPG') no-repeat;
        background-size: 100% 100%;
        margin-top: 3rem;
      }


  .dropdown-submenu {
    position: relative;
  }

  .dropdown-submenu a:after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
  }

  .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
  }

</style>


  
</head>
<body data-spy="scroll" data-target="#navbarResponsive">

<div id="home">

  <!--- Navigation --->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    
    <button  class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav mr-auto">
        
        

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="menu" aria-haspopup="true" aria-expanded="false">Business Continuity<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Mappatura del Rischio<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="nav-item">
                  <a class="dropdown-item" href="#rischio-soci">Rischio Soci</a>
                </li>
              
              </ul>
            </li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-submenu">
              <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Trattamento del Rischio<span class="caret"></span></a>
              <ul class="dropdown-menu">
                
                <li class="nav-item">
                  <a class="dropdown-item" href="#trattamento-ambiente">Trattamento Ambiente e Sociale</a>
                </li>
                <li class="nav-item">
                  <a class="dropdown-item" href="#trattamento-compliance">Trattamento Compliance</a>
                </li>
                
              </ul>
            </li>
            <li role="separator" class="divider"></li>
            <li class="nav-item">
              <a class="dropdown-item" href="#survey-risk">Risk Top 10</a>
            </li>
            <li role="separator" class="divider"></li>
          </ul>
        </li>
        

          
       
      </ul> 
    </div>
  </nav>  
  <!--- End Navigation --->  

  <!--- Start Landing Page Section --->
  <div class="landing">
    <div class="row">
      </div>
  </div>
  <!--- End Landing Page Section--->
</div>


<div id="rischio-soci" class="offset">
  <div class="home">
    <div class="row text-md-left text-center text-sm-center">
      
      <div class="col-md-8 col-sm-12 col-12">
        <div class="row">
          <div class="col-md-12">
            <div style="height: 600px" id="drawRischioSoci"></div>
          </div>
        </div>
      </div>
      <div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1"> 
     
    </div>
    <div class="row text-md-center text-center text-sm-center" style="padding-left: 1rem">
      <div class="col-md-8">
      
      </div>
  </div>
  </div>
</div>


<!-- Start Trattamento Section-->
<div id="trattamento-ambiente" class="offset">
  <div class="home" style="margin-top: 2rem;">
    <div class="row text-md-left text-center text-sm-center">
      
      <div class="col-md-8 col-sm-12 col-12">
        <div class="row">
          <div class="col-md-12">
            <h3 class="align-self-center align-items-center" align="center" style="color: black;">Trattamento Ambiente</h3>
          </div>
          <div class="col-md-12">
            <div id="drawTrattamentoAmbiente"></div>
          </div>
        </div>
      </div>
      <div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1"> 
      </div>
      
    </div>
  </div>
</div>
<!-- End Trattamento Section-->

<!-- Start Trattamento Section-->
<div id="trattamento-compliance" class="offset">
  <div class="home" style="margin-top: 2rem;">
    <div class="row text-md-left text-center text-sm-center">
      
      <div class="col-md-8 col-sm-12 col-12">
        <div class="row">
          <div class="col-md-12">
            <h3 class="align-self-center align-items-center" align="center" style="color: black;">Trattamento Compliance</h3>
          </div>
          <div class="col-md-12">
            <div id="drawTrattamentoCompliance"></div>
          </div>
        </div>
      </div>
      <div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1"> 
      </div>
      
    </div>
  </div>
</div>
<!-- End Trattamento Section-->


<script src="http://arisk-icelab.polito.it/engine/static/assets/web/assets/jquery/jquery.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/popper/popper.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/tether/tether.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/smoothscroll/smooth-scroll.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/viewportchecker/jquery.viewportchecker.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/theme/js/script.js"></script>
<script  src="http://arisk-icelab.polito.it/engine/static/assets/print.css"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<script>
  $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
    if (!$(this).next().hasClass('show')) {
      $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
    }
    var $subMenu = $(this).next(".dropdown-menu");
    $subMenu.toggleClass('show');


    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass("show");
    });


    return false;
  });

</script>
</body>
</html>

我的问题是如何解决您可以在菜单中看到的问题。您可以通过复制粘贴代码来复制此页面。

我3天前发布了此问题，但没有答案！然而。 javascript代码来自另一个SO答案。 link

这里也是问题的形象。

您可以看到“ trattamento del riscio”处于活动状态（蓝色），而只有mapatura del rischio应该处于启用状态，因为它的子菜单已打开！

未选择时，下拉菜单始终处于活动状态

0 个答案: