Fermez Bootstrap Dropdown après avoir cliqué sur le lien

j'ai un menu déroulant bootstrap ci-dessous. Il y a un lien relié à un k. o.js binding, qui retourne false car je ne veux pas que la balise # soit envoyée à l'url du navigateur. Cependant, cela ne ferme pas le menu déroulant lorsque je clique sur le lien. De toute façon?

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

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;
        });
    }
};
44
demandé sur user3335966 2013-09-17 20:30:57

11 réponses

donnez à vos liens une classe (par exemple télécharger):

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

Et votre déroulant un id (par exemple, dlDropDown):

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

puis ajouter le gestionnaire d'événement suivant:

$("a.download").click(function() {
   $("#dlDropDown").dropdown("toggle");
});
49
répondu mccannf 2013-09-17 17:47:23

Ce sera effectivement travailler avec votre bootstrap balisage sans avoir à ajouter de nouvelles classes ou id. Espérons que cela est utile à quelqu'un d'autre juste à la recherche de déposer une solution sans rien changer existant.

$(".dropdown-menu a").click(function() {
    $(this).closest(".dropdown-menu").prev().dropdown("toggle");
});
33
répondu brianespinosa 2014-04-16 01:56:31

cela peut être réalisé avec bootstraps propre classe CSS dropdown-toggle

il suffit d'ajouter cette classe à vos éléments de lien comme so:<a class='dropdown-toggle'></a> et il permet de basculer entre la liste déroulante.

18
répondu nullwriter 2015-08-12 17:53:12

je pense que cela va fermer toutes les listes déroulantes et élargi navmenus sur la page:

$('.in,.open').removeClass('in open');
12
répondu Tom 2014-03-25 11:16:31

en utilisant event.preventDefault() au lieu de return false le truc.

changez votre code en:

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

  // ...

  return true; // or just remove the return clause
});
5
répondu Fábio Batista 2015-01-26 18:51:26

malheureusement, je n'ai pas réussi à utiliser .dropdown('toggle') comme suggéré ci-dessus...

ce qui a fonctionné cependant, c'est l'application des attributs de données du bouton dropdown de bootstrap à ses propres liens dropdown:

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

j'ai Tout ajouter le data-toggle="collapse" et data-target=".navbar-collapse" à chaque lien de navigation.

Aucun autre css ou js et cela a fonctionné comme un charme :)

5
répondu Jesse Novotny 2017-03-15 17:54:48

il suffit de changer le href="#"href="javscript:void(0);" et return true dans votre événement de clic (au lieu de false).

4
répondu Rich 2014-08-28 17:58:14

Si vous avez un paramètre d'événement juste à faire:

$(element).unbind('click').bind('click', function (event)
{
    event.preventDefault();
    return true;
});
1
répondu Dave 2016-04-11 06:57:16

une solution plus propre, pour garder la fonctionnalité dropdown et obtenir ce que vous recherchez.

$("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");
});
1
répondu Raúl Cantú 2017-07-27 21:59:50

la meilleure réponse est à effectuer sur donc il va agir de la même que l'utilisateur clique sur la souris pour cacher le menu déroulant, pour ce faire ajouter ce composant logiciel enfichable code dans votre page:

<script>
    $(document).ready(function () {
        $("li.dropdown ul.dropdown-menu li").click(function (event) {
            event.toElement.parentElement.click();
        })
    })
</script>
0
répondu Akram Kamal Qassas 2014-09-24 02:49:47

vous pouvez également ajouter un masque transparent pour bloquer tout autre clic indésirable lorsque dropdown est ouvert:

   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()})"));

avec le masque

.dropdown.open #transparent-mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    margin: auto;
    height: initial;
    z-index: 1000 !important;
}
0
répondu daniel gi 2018-01-21 17:17:15