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;
});
}
};
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");
});
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");
});
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.
je pense que cela va fermer toutes les listes déroulantes et élargi navmenus sur la page:
$('.in,.open').removeClass('in open');
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
});
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 :)
il suffit de changer le href="#"href="javscript:void(0);" et return true dans votre événement de clic (au lieu de false).
Si vous avez un paramètre d'événement juste à faire:
$(element).unbind('click').bind('click', function (event)
{
event.preventDefault();
return true;
});
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");
});
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>
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;
}