0

poseo el siguiente codigo

<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>

Me gustaria que al dar click en el link padre MENSUALIDADES me lleve a la web mensualidades.php y de esta manera lo pueda borrar del desplegable que poseo, quedando solo el link VER TODAS LAS MENSUALIDADES que me llevaria a la web: todas_mensualidades.php.

Estoy trabajando con Bootstrap 4.

2
  • Solo quieres que cuando le des click al padre te redireccione pero manteniendo el estilo del dropdown cierto? Commented el 10 oct. 2018 a las 18:34
  • Correcto, ya que por instinto uno da click al link padre y lo que hace es abrir el contenido del dropdown como es su naturaleza Commented el 11 oct. 2018 a las 3:58

1 respuesta 1

1

Al dropdown le agregue un id #dropdown-mensualidades, el cual le asigno un evento click para posteriormente indicarle un stopPropagation() para que no se abra automáticamente, ya con esto puedes darle click y el te redireccionará, aparte si quieres desplegar el dropdown le agregue un evento hover para que muestre y oculte los items cuando el menú este arriba de este:

$("#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>

3
  • Gracias por tu tiempo en responder, pero al intentar implementar la sugerencia resulta que el hover al pasar el mouse despliega todo los dropdown-menu intentare analizar tu sugerencia a ver como la puedo implementar en mi código y que quede funcional..! imagino que entra en conflicto con el hover propio del dropdown-menu o con la configuracion que poseo en mi script para auto marcar la web activa que logicamnte esta escuchando directamente los elementos del dropdown-menu..!! tratare de hacerlo solo.. si no lo logro edito la pregunta y deje mas del codigo que poseo..! Commented el 12 oct. 2018 a las 1:36
  • ahh ok entiendo, bueno en el dropdown de mensualidades colocale un id y en el hover llamalo por el id asi no te despliegan todos los dropdowns Commented el 12 oct. 2018 a las 12:59
  • perfecto, cambie de usar l dropdown-menu a usar el ID Commented el 12 oct. 2018 a las 14:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.