mixitup顯示全部/無或自己選擇一個

是否有此過濾器的任何用戶知道如何更改這些設置。目前我正在使用它來顯示4種不同的食物菜單圖片。當您在菜單部分向下滾動時，它當前顯示所有項目，雖然我希望它只顯示午餐菜單，而其他時點擊它們。我發現這個文檔，但我quess即時做錯了什麼mixitup顯示全部/無或自己選擇一個

$('#Container').mixItUp({ 
    load: { 
     filter: '.category-1' 
    } 
});

請糾正我，如果我錯了，但是這是JavaScript的吧？我爲此創建一個新的js文件，因爲我似乎無法找到這部分在mixitup.js

這是我的HTML

      <section class="description_content"> 
    <div class="limit"> 
     <div class="container"> 
      <div class="row"> 
       <div id="w"> 

        <ul id="filter-list" class="clearfix"> 
         <li class="filter" data-filter="breakfast">Lunch</li> 
         <li class="filter" data-filter="special">Dinner</li> 
         <li class="filter" data-filter="desert">Diversen</li> 
         <li class="filter" data-filter="dinner">Nagerechten</li> 
        </ul><!-- @end #filter-list -->  
        <ul class="row" id="portfolio"> 
         <li class="item breakfast"><img src="images/lunch.jpg" alt="Food" > 

          <li class="item special"><img src="images/dinner.jpg" alt="Food" >

     </li>

     </li> 

        </ul><!-- @end #portfolio --> 
       </div><!-- @end #w --> 
      </div> 
     </div> 
    </div> 
</section>

這是我的頁腳

<script type="text/javascript" src="js/jquery-1.10.2.min.js"> </script> 
<script type="text/javascript" src="js/bootstrap.min.js" ></script> 
<script type="text/javascript" src="js/jquery.mixitup.min.js" ></script> 
<script type="text/javascript" src="js/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="js/jquery-ui.js"></script>  
<script type="text/javascript" src="js/jquery.mixitup.min.js" ></script> 
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> 

     <script type="text/javascript"> 
      $(function() { 
       $('a[href*=#]:not([href=#])').click(function() { 
        if (location.pathname.replace(/^\//,'') ==   this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
         var target = $(this.hash); 
          target = target.length ? target : $('[name=' +  this.hash.slice(1) +']'); 
        if (target.length) { 
         $('html,body').animate({ 
          scrollTop: target.offset().top 
         }, 1000); 
         return false; 
        } 
       } 
      }); 
     }); 

    </script> 


    <script> 
     $(function() { 
      $("#datepicker").datepicker(); 
     }); 
    </script> 

    <script type="text/javascript"> 
     $(function(){ 
      $('#portfolio').mixitup({ 
       targetSelector: '.item', 
       transitionSpeed: 450 
      }); 
     }); 
    </script>

來源

2015-06-28 daylee

我finnaly發現回答。在.js文件存在，上面寫着一個部分：

showOnLoad:"all"

只是修改成"none"或你想要顯示的PIC的文件名。

來源

2015-08-25 15:02:30 daylee

這是jQuery的，jQuery是在javascript預定義的庫，所以如果u想用這段代碼，你需要包括jQuery的在你的頁面的頭部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

來源

2015-06-28 09:48:03 njwin07

單獨包含api並不會幫助你還需要包含類似於上面的鏈接和功能的mixitup jquery文件，並且記住#Container將被您希望提供的功能的元素的ID替換閱讀更多這裏https://mixitup.kunkalabs.com/docs/ – njwin07

我在我的頁腳下找到了這行。。我應該替換爲你的腳本src嗎？然後用代碼在我的第一篇文章中創建一個新的.js文件？ – daylee

如果你使用的是谷歌瀏覽器，你可以右鍵點擊打開的檢查元素並點擊控制檯選項，一旦你打開它，點擊菜單，錯誤將顯示在控制檯中，然後我們可以看到爲什麼錯誤在那裏，你已經得到了所需的所有文件，它不需要額外的js文件，代碼甚至可以在腳本標籤內工作 – njwin07

mixitup顯示全部/無或自己選擇一個

回答

相關問題