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

vojdkbi0 于 2023-02-26 发布在其他

关注(0)|答案(6)|浏览(208)

我有一个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边界线？

css

来源：https://stackoverflow.com/questions/7471952/how-to-hide-and-show-div-border-line-in-my-case

6条答案

按热度按时间

w6lpcovy1#

将CSS属性移动到类中，然后在fruit-part中添加/删除该类。

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

#fruit-part {}

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

赞(0）回复(0）举报 2023-02-26

rt4zxlrg2#

使用JQuery的css方法：

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

赞(0）回复(0）举报 2023-02-26

taor4pac3#

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

赞(0）回复(0）举报 2023-02-26

m528fe3b4#

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

赞(0）回复(0）举报 2023-02-26

ftf50wuq5#

您可以只使用$('#fruit-part').toggle();来显示和隐藏整个div。
演示-http://jsfiddle.net/hNxQ5/

赞(0）回复(0）举报 2023-02-26

uqzxnwby6#

$('a').click(function() {
  $('#fruit-part').toggle();
});
 #fruit-part {
  border: 1px solid #cc3;
}
 <div id="fruit-part">
  <input type="radio" name="fruits" value="Mango">Mango
  <input type="radio" name="fruits" value="pineapple">Pineapple
</div>

<a href="#">Toggle visibilty</a>

赞(0）回复(0）举报 2023-02-26

我来回答

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

6条答案

相关问题

热门标签

最新问答