0

explico un poco el contexto, tengo una lista que llamo mediante una vista parcial, lo que no logro es bloquear la lista para que cuando el usuario le de clic a un elemento no se oculte, ya que si le da clic se cierra. intente invocar un div en lugar de una lista pero aun asi se sigue ocultando. ¿de que propiedad de css o alguna funcion de js o jquery me puedo apoyar para poder lograrlo?

introducir la descripción de la imagen aquí

aqui la invoco

                        <a href="#" id="alerts" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i> <b class="caret"></b></a>
                        <ul style="padding:0;" id="alerta1" class="dropdown-menu alert-dropdown">


                        </ul>
                    </li>

y esta es mi vista parcial

    <li id="btnAlerta" class="alerta btn btn-default btnAlerta">
        @Html.DisplayFor(modelItem => item.nombreCand) @Html.DisplayFor(modelItem => item.apellidoCnad)
    </li>
    <input id="candidato" [email protected] type="hidden">
1
  • por que usan la etiqueta de HTML si esto @Html.DisplayFor(modelItem => item.nombreCand) @Html.DisplayFor(modelItem => item.apellidoCnad) no es html
    – user46896
    Commented el 10 jul. 2017 a las 16:49

1 respuesta 1

2

Utiliza el evento/hook hide.bs.dropdown para evitar que se cierre simplemente neutralizando el evento.

Ejemplo

$('[no-hide-on-click]').on('hide.bs.dropdown', function(e) {
  e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown" no-hide-on-click>
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Solo debes asegurarte que se oculte cuando el origen del click sea el mismo dropdown (y no los hijos). Si usas e.target verás que siempre te muestra como origen del evento al dropdown (contenedor). Lo que ha ocurrido es que el evento se ha propagado.

Para evitar propagar el evento (en los items) y así no lleguen al dropdown usa e.stopPropagation. Lee sobre bubble propagation para entender más al respecto.

$('[no-hide-on-click] .dropdown-menu').on('click', function(e) {
  e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown" no-hide-on-click>
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

1
  • 1
    me leí la documentación y mas tu ejemplo, pude resolverlo perfectamente, muchas gracias :) Commented el 10 jul. 2017 a las 16:58

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.