javascript - close - dropdown js

Cierre el menú desplegable de Bootstrap después de hacer clic en el enlace

Question

Tengo un menú desplegable de bootstrap a continuación. Tiene un enlace enganchado a un enlace knockout.js, que devuelve falso porque no quiero que la etiqueta # se envíe a la URL del navegador. Sin embargo, hacer esto no cierra el menú desplegable cuando hago clic en el enlace. De todos modos alrededor de esto?

HTML

<div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown" data-bind="enable: !noResults()"><i class="icon-download-alt" ></i> Export <span class="icon-caret-down"></span></button>

    <ul class="dropdown-menu">
        @foreach(var exportUrl in Model.ExportUrls)
        {
            <li>
                <a href="#" data-bind="disable: noResults(), download: { url: ''@exportUrl.Value'', data: data }"><img src="/Content/less/images/img/@(exportUrl.Key.ToString().ToLower()).png" alt="@exportUrl.Key.GetDisplayName()"/> @exportUrl.Key.GetDisplayName()</a>
            </li>
        }
    </ul>
</div>

knockut.js vinculante

ko.bindingHandlers.download = {
    init: function (element, valueAccessor) {

        var value = ko.utils.unwrapObservable(valueAccessor()),
            id = ''download-iframe-container'',
            iframe;

        $(element).unbind(''click'').bind(''click'', function () {

            iframe = document.getElementById(id);

            if (!iframe) {
                iframe = document.createElement("iframe");
                iframe.id = id;
                iframe.style.display = "none";
            }

            if (value.data) {
                iframe.src = value.url + (value.url.indexOf(''?'') > 0 ? ''&'' : ''?'') + $.param(ko.mapping.toJS(value.data));
            } else {
                iframe.src = value.url;
            }

            document.body.appendChild(iframe);

            return false;
        });
    }
};

Answer 1

Creo que esto cerrará todos los menús desplegables y expandió los navegadores en la página:

$(''.in,.open'').removeClass(''in open'');

Answer 2

Dale a tus enlaces una clase (por ejemplo, descarga):

<a href="#" class="download" data-bind="disable: noResults()....

Y su lista desplegable es una identificación (por ejemplo, dlDropDown):

<button class="btn dropdown-toggle" id="dlDropDown" data-toggle="dropdown" data-bind="enable: !noResults()">

Y luego agregue el siguiente controlador de eventos:

$("a.download").click(function() {
   $("#dlDropDown").dropdown("toggle");
});

Answer 3

De hecho, esto funcionará con el marcado de arranque existente sin tener que agregar nuevas clases o ID. Es de esperar que esto sea útil para alguien más que solo busca dejar caer una solución sin cambiar nada existente.

$(".dropdown-menu a").click(function() {
    $(this).closest(".dropdown-menu").prev().dropdown("toggle");
});

Answer 4

Desafortunadamente no tuve éxito usando .dropdown(''toggle'') como se sugirió anteriormente ...

Sin embargo, lo que funcionó fue aplicar los atributos de datos del botón desplegable de bootstrap a sus propios enlaces desplegables:

<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle navbar-btn">

...

<ul class="nav navbar-nav">
  <li><a href="#about" class="scroll-to" data-toggle="collapse" data-target=".navbar-collapse">About</a></li>

Todo lo que hice fue agregar data-toggle="collapse" y data-target=".navbar-collapse" a cada enlace de navegación desplegable.

No hay css o js adicionales y funcionó como un hechizo :)

Answer 5

Esto se puede lograr con bootstraps propios del dropdown-toggle clases de CSS.

Simplemente agregue esa clase a los elementos de su enlace de la siguiente manera: <a class=''dropdown-toggle''></a> y alternará el menú desplegable.

Answer 6

Si tienes un parámetro de evento simplemente hazlo:

$(element).unbind(''click'').bind(''click'', function (event)
{
    event.preventDefault();
    return true;
});

Answer 7

Simplemente cambie href="#" a href="javscript:void(0);" y luego return true en su evento click (en lugar de false ).

Answer 8

Una solución más limpia, para mantener la funcionalidad desplegable y obtener lo que está buscando.

$("body").on(''click'', function (e) {
     if (!$(e.target).hasClass("open") && $(e.target).parents(".btn-group.open").length == 0)
         $(this).find(".btn-group.open a").trigger("click");
});

Answer 9

Usar event.preventDefault() lugar de return false hace el truco.

Cambia tu código a:

$(element).unbind(''click'').bind(''click'', function(e) {
  e.preventDefault();

  // ...

  return true; // or just remove the return clause
});

Answer 10

la mejor respuesta será hacer clic para que actúe de la misma manera que el usuario haga clic con el mouse para ocultar el menú desplegable, para hacerlo agregue este código de ajuste a su página:

<script>
    $(document).ready(function () {
        $("li.dropdown ul.dropdown-menu li").click(function (event) {
            event.toElement.parentElement.click();
        })
    })
</script>

Answer 11

también puede agregar una máscara transparente para bloquear cualquier otro clic no deseado cuando el menú desplegable esté abierto:

   OnDomReadyHeaderItem.forScript("$(''.dropdown'').on(''shown.bs.dropdown'', function (e) { $(this).append(''<span id=/"transparent-mask/"></span>'')})"));

   OnDomReadyHeaderItem.forScript("$(''.dropdown'').on(''hidden.bs.dropdown'', function (e) { $(''#transparent-mask'').remove()})"));

con la máscara:

.dropdown.open #transparent-mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    margin: auto;
    height: initial;
    z-index: 1000 !important;
}