Question

希望使用Bootstrap下拉/弹出菜单实现Isotope过滤器选项，但运气不佳。 Bootstrap菜单停止工作，因为它在选择时停止切换和关闭，尽管同位素过滤在点击时起作用。两者（同位素和自举菜单）都可以单独使用。任何帮助表示赞赏。

HTML：

<div class="btn-group btn-input clearfix">
                          <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
                            <span data-bind="label">All</span> <span class="caret"></span>
                          </button>
                          <ul id="work-menu" class="dropdown-menu " role="menu">
                            <li><a href="#" data-filter="*" class="current">All</a></li>
                            <li><a href="#" data-filter=".web">Web Projects</a></li>
                            <li><a href="#" data-filter=".webapp">Web Applications</a></li>
                            <li><a href="#" data-filter=".mobile">Mobile Projects</a></li>
                            <li><a href="#" data-filter=".graphic">Graphic Designs</a></li>
                          </ul>

</div>

JS：

var $container = $('.works-wrap');
$container.isotope({
    filter: '*',
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
    }
});


//Bootstrap dropdown menu
$( document.body ).on( 'click', '#work-menu li', function( event ) {

       var $target = $( event.currentTarget );
       $target.closest( '.btn-group' ).find( '[data-bind="label"]' ).text( $target.text() ).end()
       .children( '.dropdown-toggle' ).dropdown( 'toggle' );

       return false;

});

Answer 1

以下是我刚刚使用Bootstrap 3的Dropdown和Isotope ... JS的工作。我几天前看到了你的帖子，希望能得到一个答案，所以我一直在努力工作，直到今天早上。我为joomla 3模块写了这个，并使用下拉列表得到它：

 jQuery(document).ready(function() {

  jQuery.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
  /* activate jquery isotope */
  jQuery("#posts").imagesLoaded( function(){
  jQuery("#posts").isotope({
   filter: '*',   
    itemSelector : '.item',
    layoutMode : 'fitRows',
    getSortData : {
      category : function(jQueryelem) {
        return jQueryelem.attr("data-category");
        } 
      }
    });
    });
  });

jQuery("#sort-mike a").click(function(event){
  var selector = jQuery(this).attr("data-filter");
  event.preventDefault();
  jQuery("#posts").isotope({ 
    filter: selector,
    sortBy : 'category',  
    sortAscending : true
  });
  return true;


});



});

然后是html和php：

<?php 


 echo "<section>";
 echo "<div class=\"container\">";
 echo "<div class=\"row\">";

 echo "<div class=\"col-md-12\">";
 echo "<div class=\"dropdown\">";
 echo "<a id=\"dLabel\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"#\">Divcom <span class=\"caret\"></span></a>";
 echo "<ul id=\"sort-mike\" class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">";
 echo "<li><a href=\"#\" data-filter=\"*\" >All</a></li>";
 echo "<li><a href=\"#\" data-filter=\".dcportland\" >Portland</a></li>";
 echo "<li><a href=\"#\" data-filter=\".dccanada\">Canada</a></li>";
 echo "<li><a href=\"#\" data-filter=\".dcuk\">UK</a></li>";
 echo "<li><a href=\"#\" data-filter=\".dcaustralia\">Australia</a></li>";
 echo "<li><a href=\"#\" data-filter=\".dcindia\">India</a></li>";
 echo "<li><a href=\"#\" data-filter=\".dchongkong\">Hong Kong</a></li>";
 echo "<li><a href=\"#\" data-filter=\".dcthailand\">Thailand</a></li>";
 echo "<li><a href=\"#\" data-filter=\".dcbroadcast\" >Broadcast</a></li>";
 echo "</ul>";
 echo "</div>";   
 echo "</div>";
 echo "</div>";
 echo "<p></p>";



 echo "<div id=\"posts\" class=\"row\">";

      foreach ($rows as $row) {

 echo '<div class="item col-md-2 '. $row->producer .' '. $row->producer2 .' "     data-category="'. $row->producer .' '. $row->producer2 .' '. $row->producer3 .' '. $row->producer4 .'">';
 echo '<div class="industries">';
 echo '<a href="' . $row->webaddress . '" target="_blank"><img src="' . $row->logo . '"   class="img-responsive"></a>';

 echo '<span class="location"><br />' . $row->location . '</span>';
 echo '<span class="date">';
 echo '<br />' . date('F d, Y', strtotime('' . $row->startdate . ''));
 echo '</span>';
 echo       "</div>";
 echo       "</div>";

     }

echo    "</div>"; 
echo   "</div>"; 
echo "</section>";  

?>

使用Twitter Bootstrap下拉列表进行jQuery Isotope过滤

1 个答案: