有问题的代码在这里:https ://jsfiddle.net/ozeasa8t/
目标是通过一个缓存元素数组来 each(),以便在 enquire.js 驱动的 js 中创建切换效果。
我得到了左右错误,并希望你的意见。谢谢!
// I'm separating block A and B in declaration because the cached elements are used for other things
var $blockA = $('.block-a'),
$blockB = $('.block-b');
// Creating array
var blockArray = [$blockA,$blockB];
var handler = function(el) {
el.find('.block-content').toggle();
el.closest('.wrapper').toggleClass('open');
};
blockArray.each(function() {
enquire.register('screen and (max-width:1023px)', {
match: function() {
// Wrap each block in a .wrapper
$(this).wrap('<div class="wrapper"></div>');
// .block-content should be hidden initially
$(this).find('.block-content').hide();
// .block-title will toggle its sibling .block-content
$(this).find('.block-title').bind( "click", handler($(this)));
},
unmatch: function() {
// Unwrap .wrapper
$(this).unwrap();
// Unbind so we don't end up with toggling block in desktop
$(this).find('.block-title').unbind( "click", handler($(this)));
}
})
});
.block {
margin:20px;
background:#fff;
border:1px solid black;
font:14px sans-serif;
}
.block .block-title {
background:#f4f4f4;
padding:10px 15px;
font-weight:bold;
}
.block .block-content {
padding:10px 15px;
}
<div class="block-a block">
<div class="block-title">
Block A TItle
</div>
<div class="block-content">
Bluh Bluh
</div>
</div>
<div class="block-b block">
<div class="block-title">
Block B TItle
</div>
<div class="block-content">
Bluh Bluh
</div>
</div>