1,可能最简单的就是toggle,但是这个属性只有是jquery.1.8.1.js才可以用,右局限性。
2,用click实现:点一下显示下拉内容,再点一下消失,点击其他地方也消失
// 远程操作
$('.vdts-left-bottom .select').click(function(e) {
var statebox = $('.optionbox').css('display');
if (statebox == 'none') {
$('.optionbox').slideDown();
} else {
$('.optionbox').slideUp();
}
$(document).one('click', function (e) {
$('#vdts').blur();
$('#vdts').click();
$('.optionbox').hide();
})
e.stopPropagation();
});
$('.optionbox').on('click', function (e) {
e.stopPropagation();
});
首先找到共同的状态 display,根据需求进行判断
3,复选框为图片时的操作:点一下是选中状态,再点一下是非选中状态
$('.vdts-top li .c-name').click(function() { var stateimg = $(this).find("img").attr('src'); if(stateimg == 'img/uncheck.png'){ $(this).find(" img").attr('src', 'img/checked.png'); $(this).addClass('checked1'); }else{ $(this).find("img").attr('src', 'img/uncheck.png'); $(this).removeClass('checked1'); } });
4,判断勾选个数,进行页面切换
//多屏显示 $('.screennumber').click(function() { var state = $(this).find('span').html(); if(state == "多屏查看") { var screens = $('.computerlist .checked1').length; if(screens <= 4 && screens > 0) { $(this).find('span').html("退出全屏"); $('.fourscreen').css('display', 'block'); $('.vdts-content').css('display', 'none'); ('.eightscreen').css('display', 'none'); } else if(screens>4) { $(this).find('span').html("退出全屏"); $('.eightscreen').css('display', 'block'); $('.vdts-content').css('display', 'none'); $('.fourscreen').css('display', 'none'); } } else { $(this).find('span').html("多屏查看"); $('.vdts-content').css('display', 'block'); $('.fourscreen').css('display', 'none'); $('.eightscreen').css('display', 'none'); } });