如何在我的案例中隐藏和显示 div 边框线?

问题描述 投票:0回答:6

我有一个 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()
我可以轻松地 hideshow
div
内的内容,但不是 div 边框线。

正如你在上面看到的,我的

div
有一条颜色为“#cc3”的边框线,我想知道,如何使用jQuery来隐藏和显示div边框线?

javascript jquery jquery-selectors css
6个回答
5
投票

将您的 CSS 属性移动到一个类,然后从

fruit-part
.

中添加/删除该类
.bordered {
    border: 1px solid #cc3;
}

#fruit-part {}

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

3
投票

使用JQuery的

css
方法:

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

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

0
投票

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


0
投票

您可以只使用

$('#fruit-part').toggle();
来显示和隐藏整个div.

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


0
投票

$('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>
© www.soinside.com 2019 - 2024. All rights reserved.