基於切換時刪除/添加類

我有一列在click函數上向左滑動。然後，將該類的w添加到容器，以便在列滑出後更改其寬度。我試圖做的是當它滑回時添加e的類，然後通過將它包裝在toggle函數中刪除w類，但容器仍包含w的類，並且不會添加類e 。思考？基於切換時刪除/添加類

FIDDLE： http://jsfiddle.net/QDUQk/1926/

.container { 
    border: 1px solid #000; 
    width: 200px; 
} 

.container.e { 
    width: 80%; 
} 

.container.w { 
    width: 100%; 
} 

<div class="togl">Menu</div> 
<div class="col"> 
    SLIDE ME SLIDE ME PLX PLX 
</div> 
<div class="container"> 
</div> 

$('.togl').click(function() { 
    if ($('.container').is(':visible')) { 
    $('.col').toggle('slide', { 
     direction: 'left' 
    }, 1000, function() { 
     $('.container').addClass('w'); 
     $('.container').removeClass('e'); 
    }); 
    } else { 
    $('.col').toggle('slide', { 
     direction: 'left' 
    }, 1000, function() { 
     $(".container").removeClass('w'); 
     $(".container").addClass('e') 
    }); 
    } 
});

來源

2016-11-12 coding_question

的.container能見度不從true改變。檢查"w"className在.is()

$('.togl').click(function() { 
    if (!$('.container').is('.w')) { 
    $('.col').toggle('slide', { 
     direction: 'left' 
    }, 1000, function() { 
     $('.container').addClass('w'); 
     $('.container').removeClass('e'); 
    }); 
    } else { 
    $('.col').toggle('slide', { 
     direction: 'left' 
    }, 1000, function() { 
     $(".container").removeClass('w'); 
     $(".container").addClass('e') 
    }); 
    } 
});

的jsfiddle http://jsfiddle.net/QDUQk/1927/

來源

2016-11-12 05:52:01 guest271314

@coding_question參見[：可見選擇（https://api.jquery.com/visible-selector/）_「元素被認爲是可見的，如果他們消耗在文檔中的空間可見元素都有。寬度或高度大於零具有'visibility：hidden'或'opacity：0'的元素被視爲可見的，因爲它們仍佔用佈局中的空間。「_ http://jsfiddle.net/QDUQk/ 1928/ – guest271314

接受，謝謝。我會讀一下關於.is的。 –

請考慮使用'hasClass（）'來代替 – RizkiDPrast

您的容器知名度不上單擊更改。試試以下，

$('.togl').click(function() { 
    if ($('.container').hasClass('e')) { 
     $('.col').toggle('slide', { 
         direction: 'left' 
     }, 1000, function() { 
    $('.container').addClass('w'); 
    $('.container').removeClass('e'); 
    }); 
} else { 
$('.col').toggle('slide', { 
    direction: 'left' 
}, 1000, function() { 
    $(".container").removeClass('w'); 
    $(".container").addClass('e') 
}); 
}});

來源

2016-11-12 06:11:10 ScanQR

基於切換時刪除/添加類

回答

相關問題