我们正尝试通过 MixItUp v3.1.11 过滤在 Bootstrap 中显示我们的投资组合,并尝试在加载页面时加载特定类别(不是所有项目)。
Patrick Kunka 提供了如何完成的示例 here .
同样的问题被问到here
我们的问题是推荐的解决方案不起作用。我的猜测是由于bootstrap + mixitup问题导致选择器的变化有关:
control: '[data-mixitup-control]'
这是页面末尾的一段代码:
var containerEl = document.querySelector('#selector');
var mixer = mixitup(containerEl, {
selectors: {
target: '.mix',
control: '[data-mixitup-control]'
},
animation: {
effects: 'fade scale stagger(50ms)' // Set a 'stagger' effect for the loading animation
},
load: {
filter: 'none' // Ensure all targets start from hidden (i.e. display: none;)
}
});
// Add a class to the container to remove 'visibility: hidden;' from targets. This
// prevents any flickr of content before the page's JavaScript has loaded.
containerEl.classList.add('mixitup-ready');
// Show all targets in the container
mixer.show()
.then(function() {
// Remove the stagger effect for any subsequent operations
mixer.configure({
animation: {
effects: 'fade scale'
},
load: {
filter: '.residential' // Ensure all targets start from hidden (i.e. display: none;)
}
});
});
当我将过滤器更改为所需的 .residential 时,它不起作用。
我也尝试添加这个:
$(function(){
$('#selector').mixItUp({
load: {
filter: '.residential'
}
});
});
运气不好。知道问题出在哪里吗?
最佳答案
结合 MixItUp v3.1.9
和 Bootstrap 4
试试这个例子。
添加data-mixitup-control
以避免与其他数据属性发生冲突:
<button type="button" class="control" data-mixitup-control data-`enter code here`filter=".product">PRODUCTS</button>
初始化 MixItUp:
var container = document.querySelector('.portfolio');
var mixer = mixitup(container, {
selectors: {
control: '[data-mixitup-control]'
}
});
关于javascript - bootstrap + mixitup 过滤器加载问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44063777/