Près de Bootstrap Déroulant après cliquez sur le lien

J'ai un bootstrap menu déroulant ci-dessous. Il a un lien dans il est branché à un knockout.js de liaison, qui renvoie faux car je ne veux pas l' # tag à envoyer à l'adresse url du navigateur. Mais cela ne marche pas fermer le menu déroulant lorsque je clique sur le lien. De toute façon cela?

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 la 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;
        });
    }
};

InformationsquelleAutor Mike Flynn | 2013-09-17

50

Donner vos liens une classe (par exemple téléchargement):
```
<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");
});
```
- Je suis votre parcours, mais utilisé de ce lieu, $('bouton[data-toggle=déroulante]').liste déroulante('toggle');
- En fait ce. $(element).parents (".ouvert").find('bouton[data-toggle=déroulante]').liste déroulante('toggle');
InformationsquelleAutor mccannf
36

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 tout simplement à la recherche à goutte une solution sans changer quoi que ce soit existant.
```
$(".dropdown-menu a").click(function() {
    $(this).closest(".dropdown-menu").prev().dropdown("toggle");
});
```
- Pas envahissantes, comme la réponse choisie. Merci
- Je l'ai aimé, mais il a changé un peu pour trouver la plus proche de liste déroulante contenant, puis allez vers le bas pour trouver le gestionnaire de liste déroulante: $(this).closest(".dropdown").find("[data-toggle='dropdown']").dropdown("toggle");
- $(".dropdown-menu").on("click.bs.liste déroulante", function () { });
InformationsquelleAutor brianespinosa
19

Ceci peut être réalisé avec des bottes propres de la classe CSS dropdown-toggle

Juste à ajouter que la classe de votre lien éléments comme: <a class='dropdown-toggle'></a> et il permet de basculer entre la liste déroulante.
- La meilleure façon - sans supplément de js nécessaire! Avis, data-toggle attribut, l'identification de la liste déroulante doit être spécifié - <a class='dropdown-toggle' data-toggle='dropdown-role-name'></a>
- J'ai aussi sauvegarder avis que c'est la bonne réponse.
InformationsquelleAutor nullwriter
12

Je pense que ce sera fermer toutes les listes déroulantes et élargi navmenus sur la page:
```
$('.in,.open').removeClass('in open');
```
- Meilleure réponse jusqu'à présent. Certains des autres réponses empêcher le menu d'être ouvert à nouveau jusqu'à ce que la page est rechargée; ce qui ne l'est pas. Mon utilisation: $(".modal").on("show.bs.modal", function() { $(".dropdown.in,.dropdown.open").removeClass("in open"); });
- J'ai aussi trouvé que l'class='dropdown-toggle" solution modifié la mise en forme de la liste déroulante des options. C'est la meilleure solution pour moi.
InformationsquelleAutor Tom

À l'aide de event.preventDefault() au lieu de return false fait le tour.

Modifier votre code pour:

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

  //...

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

Fonctionne comme un mal!

InformationsquelleAutor Fábio Batista

5

J'ai malheureusement eu aucun succès à l'aide de .dropdown('toggle') comme suggéré ci-dessus...

Ce n'travail a été cependant l'application de bootstrap du bouton de la liste déroulante de données des attributs propres déroulant liens:
```
<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>
```
Que je n'ai fait ajouter le data-toggle="collapse" et data-target=".navbar-collapse" à chaque liste déroulante nav lien.

Aucune autre css ou js et cela a fonctionné comme un charme 🙂
- Cela devrait être la réponse choisie parce que c'est la façon correcte de le faire sans exiger un complément de JS.
InformationsquelleAutor Jesse Novotny
4

Il suffit de modifier le href="#" à href="javscript:void(0);" et puis return true dans votre événement click (au lieu de false).

InformationsquelleAutor Rich

Si vous avez un événement paramètre viens de faire:

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

InformationsquelleAutor Dave

Une solution de nettoyage, de garder la liste déroulante de la fonctionnalité et obtenir ce que vous cherchez.

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

InformationsquelleAutor Raúl Cantú

0

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>
```
InformationsquelleAutor Akram Kamal Qassas

vous pouvez également ajouter un masque transparent pour bloquer toutes les autres indésirables, cliquez sur lorsque déroulante est ouverte:

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

InformationsquelleAutor daniel gi

Vous devez vous connecter pour publier un commentaire.