Menu with Menu dropdown does not link to the parent Bootstrap link

Question

Menu with Menu dropdown does not link to the parent Bootstrap link

Navigation

#1 by (1 votes)

0

I have the following code

<li class="nav-item dropdown">
        <a title="Ver Mensualidades" class="nav-link dropdown-toggle" href="mensualidades.php" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-money-bill-alt fa-fw"></i>  Mensualidades <span data-toggle="popover" title="Mensualidad Detectada" data-content="Se ha detectado un pago de Mensualidad, pendiente de conformacion." class="badge badge-light"><?php suma_mensualidad(); 
         echo $pendiente_mensualidad; ?></span>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a title="Mensualidades por Aprobar" class="dropdown-item" href="mensualidades.php"><i class="fa fa-money-check fa-fw"></i> Mensualidades por Aprobar</a>
          <a title="Ver Todas las Mensulidades" class="dropdown-item" href="todas_mensualidades.php"><i class="fa fa-list-alt fa-fw"></i> Ver todas las Mensualidades</a>
        </div>
      </li>

I would like that by clicking on the parent MENSUALIDADES link, I will be taken to the website mensualidades.php and in this way I will be able to delete it from the dropdown that I have, leaving only the link SEE ALL THE MONTHS that would take me to the web: all_mesualities .php.

I'm working with Bootstrap 4.

html5 bootstrap bootstrap-4 dropdownlist

asked by Jose M Herrera V 10.10.2018 в 02:40

source

1 answer

Web screen orientation error when traversing array

score 1 · Accepted Answer

To the dropdown I added an id #dropdown-mensualidades , which assigned a click event to later indicate a stopPropagation() so that it does not open automatically, and with this you can click and it will redirect you, apart if you want to display the dropdown add a hover event to show and hide items when the menu is on top of it:

$("#dropdown-mensualidades").on("click", function(e){
  e.stopPropagation();
});

$('#dropdown-mensualidades').hover(function() {
  $(".dropdown-menu").delay(200).show();
}, function() {
  $(".dropdown-menu").delay(1000).hide(500);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<li id="dropdown-mensualidades" class="nav-item dropdown">
  <a title="Ver Mensualidades" class="nav-link dropdown-toggle" href="mensualidades.php" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-money-bill-alt fa-fw"></i>  Mensualidades <span data-toggle="popover" title="Mensualidad Detectada" data-content="Se ha detectado un pago de Mensualidad, pendiente de conformacion." class="badge badge-light"><?php suma_mensualidad(); 
         echo $pendiente_mensualidad; ?></span>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a title="Mensualidades por Aprobar" class="dropdown-item" href="mensualidades.php"><i class="fa fa-money-check fa-fw"></i> Mensualidades por Aprobar</a>
          <a title="Ver Todas las Mensulidades" class="dropdown-item" href="todas_mensualidades.php"><i class="fa fa-list-alt fa-fw"></i> Ver todas las Mensualidades</a>
        </div>
      </li>
      
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>