I am a complete novice to the javascript language.
I followed this tutorial on using Isotope. I decided to attempt to integrate this with nav-pills to create my own filtering. It works nicely, however the menu pop-up will not fade away after I have clicked my filter.
Please see snippets of my code:
<ul class="nav nav-pills">
<li id="isotopedemo"><a href="" data-filter="*">Demo All</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" class="menu">For Sale<b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="isotope"><a href="" data-filter=".cat1">Demo 1</a></li>
<li id="isotopedemo"><a href="" data-filter=".cat2">Demo 2</a></li>
<li id="isotopedemo"><a href="" data-filter=".cat3">Demo 3</a></li>
<li id="isotopedemo"><a href="" data-filter=".cat4">Demo 4</a></li>
<li id="isotopedemo"><a href="" data-filter=".cat5">Demo 5</a></li>
<li id="isotopedemo"><a href="" data-filter=".cat6">Demo 6</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
var $container = $('#content');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$('#isotopedemo a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
});
</script>
I just want the box to close once its clicked, what makes this even more frustrating is that I am not sure what to search for.
Try this
Live Demo : http://codebins.com/bin/4ldqp7z
$(document).ready(function() {
var $container = $('#content');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$(".dropdown").click(function(){
$(".dropdown-menu").show(400);
});
$('#isotopedemo a').click(function() {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$(".dropdown-menu").hide(500);
return false;
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.