javascript - jQuery Isotope 和 Twitter Bootstraps nav nav-pills

Question

我是 javascript 语言的完全新手。

我按照本教程使用同位素。我决定尝试将其与 nav-pills 集成以创建我自己的过滤。它工作得很好，但是在我单击过滤器后菜单弹出窗口不会消失。

请查看我的代码片段：

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

我只是希望该框在单击后关闭，更令人沮丧的是我不确定要搜索什么。

Answer 1

试试这个

现场演示：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;
    });
});