如何在我的情况下隐藏和显示div边框线？

Question

我有一个div元素：

<div id="fruit-part"> 
     <input type="radio" name="fruits" value="apple">Apple 
     <input type="radio" name="fruits" value="orange">Orange 
</div> 

我的CSS定义DIV边框颜色

#fruit-part { 
    border: 1px solid #cc3; 
} 

通过使用jQuery：$('#fruit-part').hide()和$('#fruit-part').show()我可以很容易地隐藏和显示里面的内容div，但不是div边界线。

正如你在上面看到的，我的div有一个边框线，颜色为“＃cc3”，我在想如何使用jQuery来隐藏和显示div边框线？

Answer 1

移动你的CSS属性的一类，然后添加/删除fruit-part这个类。

.bordered { 
    border: 1px solid #cc3; 
} 

#fruit-part {} 

$('#fruit-part').addClass('bordered'); 
$('#fruit-part').removeClass('bordered'); 

Answer 2

使用jQuery的css方法：

$("#fruit-part").css("border", ""); 

Answer 3

/* CSS */ 
.noborder { border: 0; } 
//Hide border 
$('#fruit-part').addClass('noborder'); 
//Show border 
$('#fruit-part').removeClass('noborder'); 

Answer 4

$('#fruit-part').css('border', '');和$('#fruit-part').css('border', '1px solid #cc3');

Answer 5

你可以使用$('#fruit-part').toggle();显示和隐藏整个股利。

演示 - http://jsfiddle.net/hNxQ5/