[英]jQuery Isotope and Twitter Bootstraps nav nav-pills
I am a complete novice to the javascript language. 我是javascript语言的新手。
I followed this tutorial on using Isotope. 我按照本教程使用同位素。 I decided to attempt to integrate this with nav-pills to create my own filtering.
我决定尝试将其与nav-pills集成以创建自己的过滤器。 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 现场演示: 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;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.