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();来显示和隐藏整个div。

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

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

5 个答案: