Bootstrap menu not closing in mobile mode
1,257 views
Skip to first unread message
Martin H. Andersen
Aug 19, 2013, 1:27:17 PM8/19/13
to duran...@googlegroups.com
When using the bootstrap navbar menu and the link items href only contains a # tag then the menu is not closing. Please read this https://github.com/twbs/bootstrap/issues/9013#issuecomment-22323002
Other people that is using Angular or Ember is having the same problem.
The proposed solution is this:(slightly modified to use .on)
$('.navbar-nav a.navbar-link').on('click', function () {
var navbarToggle = $('.navbar-toggle');
if (navbarToggle.is(':visible')) {
navbarToggle.trigger('click');
}
});
If I create a fixed navbar menu this code will fix the problem
$(document).ready(function () {
$('.navbar-nav a.navbar-link').on('click', function () {
var navbarToggle = $('.navbar-toggle');
if (navbarToggle.is(':visible')) {
navbarToggle.trigger('click');
}
});
});
Now I am asking, where should I put this code, when I am using Durandal?
Martin H. Andersen
Aug 19, 2013, 1:28:44 PM8/19/13
to duran...@googlegroups.com
Full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Starter Template for Bootstrap</title>
<link href="Content/bootstrap/bootstrap.css" rel="stylesheet" />
</head>
<body style="padding-top: 50px;">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#" class="navbar-link">About</a></li>
<li><a href="#" class="navbar-link">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="padding: 40px 15px;">
<div>
<h1>Example of Bootstrap Menu</h1>
<h3>Try to resize the browser to a width smaller than 760px and watch the menu!!!</h3>
</div>
</div>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.navbar-nav a.navbar-link').on('click', function () {
var navbarToggle = $('.navbar-toggle');
if (navbarToggle.is(':visible')) {
navbarToggle.trigger('click');
}
});
});
</script>
</body>
</html>
--
You received this message because you are subscribed to a topic in the Google Groups "DurandalJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/durandaljs/ZNpyXOgQT1U/unsubscribe.
To unsubscribe from this group and all its topics, send an email to durandaljs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
|
Med venlig hilsen / Best regards |
|
|
|
Martin H. Andersen |
|
System developer |
Martin H. Andersen
Aug 20, 2013, 10:24:20 AM8/20/13
to duran...@googlegroups.com
OK here is a solution.
define(['knockout', 'jquery'], function (ko, $) {
ko.bindingHandlers.closeBootstrapNavigationMenuOnClick = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// This will be called when the binding is first applied to an element
// Set up any initial state, event handlers, etc. here
$(element).on('click', 'a.navbar-link', null, function () {
var navbarToggle = $('.navbar-toggle');
if (navbarToggle.is(':visible')) {
navbarToggle.trigger('click');
}
});
}
};
});
And U used it like this:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" data-bind="foreach: router.navigationModel, closeBootstrapNavigationMenuOnClick: router.navigationModel">
<li data-bind="css: { active: isActive }">
<a class="navbar-link" data-bind="attr: { href: hash }, html: title"></a>
</li>
</ul>
</div>
Enjoy
Reply all
Reply to author
Forward
0 new messages