[英]jQuery filter elements and add class if class not present and if it's the first element
我想過濾一組元素,僅在集合中的另一個元素不包含“活動”類時,才將“活動”類添加到第一個元素中。
如果上述說法正確,我也想隱藏其他元素。
現有代碼需要編輯
$mmenu.not(':eq(0)').hide();
$mmenu.eq(0).addClass('active');
$mnav_a.eq(0).addClass('active');
我目前的失敗嘗試
$mmenu.filter(function( index ) {
console.log(index);
if (!$(this).hasClass('active')) {
$mmenu.eq(0).addClass('active');
$mnav_a.eq(0).addClass('active');
};
$(this).not('.active').hide();
});
Codepen
筆 -(編輯:現在顯示正確的工作示例)
這應該做你想要的。
// check and store if .active element exists
var active = $mmenu.not(':first').is('.active');
// if it doesn't exists
if (!active){
$mmenu.hide() // hide all
.removeClass('active') // remove the active class from any that have it
.first() // select the first only
.addClass('active') // give it the active class
.show(); // and show it
}
非常感謝Gaby aka G.Petrioli,其工作代碼如下:
$(window).smartresize(function () {
var $mmenu = $('.menu__main');
if ($mmenu.length > 0) {
var $mnav = $('.menu__nav'),
$mnav_a = $mnav.find('a'),
m = parseInt($mnav.outerHeight(true), 10),
$contain = $mmenu.closest('.menu-container'),
h = 0,
l = 0;
// check and store if .active element exists
var active = $mmenu.not(':first').is('.active');
// if it doesn't exists
if (!active) {
$mmenu.hide() // hide all
.removeClass('active') // remove the active class from any that have it
.first() // select the first only
.addClass('active') // give it the active class
.show(); // and show it
$mnav_a.eq(0).addClass('active');
$mmenu.each(function(z) {
var $this = $(this);
$this.css('height','auto');
$this.css({
zIndex: z+1,
position: 'absolute',
top: m + "px",
left: l,
height: (parseInt($this.outerHeight(false), 10) + m) + "px"
});
l = l - $this.outerWidth();
});
$contain.height($mmenu.eq(0).height());
} else {
$mmenu.each(function(z) {
var $this = $(this);
$this.css('height','auto');
$this.css({
zIndex: z+1,
position: 'absolute',
top: m + "px",
height: (parseInt($this.outerHeight(false), 10) + m) + "px"
});
});
var $new_contain = $('.menu__main.active').height();
$contain.height($new_contain);
}
$mnav_a.on('click', function(e) {
e.preventDefault();
var $this = $(this);
if (!$this.hasClass('active')) {
$mmenu.stop(true, true);
$mnav_a.removeClass('active');
$this.addClass('active');
$mmenu.filter($('.active'))
.removeClass('active')
.fadeOut(250)
.animate({left:l+"px"}, 250);
var $target = $mmenu.filter($this.attr('href'));
$contain.animate({height:$target.height()}, 250);
$target.addClass('active')
.fadeIn(250)
.animate({left:0}, 250);
}
$this.blur();
});
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.