jQuery同位素過濾在Safari和Chrome中不起作用

我正在使用同位素根據其類別過濾wordpress中的帖子。在Firefox中一切正常，但在Safari和Chrome中，過濾不起作用。當我點擊過濾器項目時，動畫不會發生。定位是很好的crossbrowser。 Safari和Chrome都沒有報告錯誤控制檯中的任何錯誤，所以我不知道什麼是錯的。jQuery同位素過濾在Safari和Chrome中不起作用

這是Safari中的輸出HTML：

過濾導航：應過濾

<div id="gallery-wrapper" style="position: relative; overflow: hidden; height: 1745px;" class="isotope">         
    <div class="child-page-thumb art-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
    <div class="child-page-thumb art-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(239px, 0px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
    <div class="child-page-thumb art-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(478px, 0px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
    <div class="child-page-thumb historical-photos-exhibition isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(239px, 161px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
    <div class="child-page-thumb historical-photos-exhibition isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(478px, 161px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
    <div class="child-page-thumb historical-photos-exhibition isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 203px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
    <div class="child-page-thumb other-exhibitions isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(239px, 343px, 0px);"> 
    </div><!-- end .child-page-thumb --> 
</div>

這裏

<div id="isotope-nav"> 
    <div class="gallery-fillter-wrapper"> 
     <select class="gallery-filter"> 
      <option>-- Filter galleries --</option> 
      <option data-filter="*" class="isotope-nav-item">All galleries</option>              <option data-filter=".art-exhibitions" class="isotope-nav-item">Art Exhibitions</option> 
                   <option data-filter=".historical-photos-exhibition" class="isotope-nav-item">Historical photos Exhibition</option> 
                   <option data-filter=".other-exhibitions" class="isotope-nav-item">Other exhibitions</option> 
                   <option data-filter=".springtime-in-the-royal-compound" class="isotope-nav-item">Springtime in The Royal Compound</option> 
                   <option data-filter=".summer-at-the-royal-compound" class="isotope-nav-item">Summer at The Royal Compound</option> 
                   <option data-filter=".the-artwork-of-the-month" class="isotope-nav-item">The Artwork of the Month</option> 
                    <option data-filter=".the-regalia" class="isotope-nav-item">The Regalia</option> 
                   <option data-filter=".trh-prince-peter,-prince-philip-and-prince-alexander" class="isotope-nav-item">TRH Prince Peter, Prince Philip and Prince Alexander</option> 
                 </select> 
    </div><!-- end .gallery-filter-wrapper --> 
</div>

項目是JavaScript：

var cell_width = $('.child-page-thumb').outerWidth(); 
var cell_height = $('.child-page-thumb').outerHeight(); 
$container = $('#gallery-wrapper'); 

$container.isotope({ 
    layoutMode: 'masonry' 
}); 

$('#isotope-nav option').click(function(){ 
    $selector = $(this).attr('data-filter'); 
    $container.isotope({filter: $selector}); 
    return false; 
});

來源

2013-12-12 Bojana Šekeljić

我想到了這一點一出。問題在於，在webkit瀏覽器中，選擇<option>標記不能用作點擊，因此我將導航轉換爲鏈接，標記爲<a>，並且所有內容都可以跨瀏覽器使用。

來源

2013-12-18 09:15:53

jQuery同位素過濾在Safari和Chrome中不起作用

回答

相關問題