Question

我有一个非常简单的脚本来显示一个不错的下拉菜单选项。

我希望div周围的边框可以在点击时更改颜色，但不会覆盖现有的边框颜色。

剧本：

$(document).ready(function() {
  $('#select').click(function () {
    $('#optionbox').slideToggle(150);
    $(this).toggleClass('selectborderchange');
  });
});

和小提琴：http://jsfiddle.net/btyaf/1/

#select div应该将边框颜色从红色切换为蓝色......

Answer 1

classToggle 需要 toggleClass 。这是工作脚本：

$(document).ready(function() {
  $('#select').click(function () {
    $('#optionbox').slideToggle(150);
    $(this).toggleClass('selectborderchange');
  });
});

这是小提琴：

编辑 =====

我已经更新了修复程序，现在可以使用了。要确保边框更改父级的先前设置，请添加！important 指令。

http://jsfiddle.net/btyaf/4/

Answer 2

您需要进行两项更改：

将JS中的classToggle('selectborderchange')更改为toggleClass('selectborderchange')
将CSS中的.selectborderchange更改为#select.selectborderchange

JSFiddle Here

如果您遇到过JQuery问题，请务必先检查您的控制台！它会告诉你找不到方法classToggle。

.selectborderchange需要更改为#select.selectborderchange，因为#select定义的红色边框是id的红色边框。在CSS中，由id创建的任何规则将始终覆盖由类创建的规则。即使您的select div附加了selectborderchange类，#select id 定义的红色边框也始终优先于{{1}定义的蓝色边框} class 。

.selectborderchange会选择#select.selectborderchange的ID和#select的类，因为这更具体，只有.selectborderchange的ID，它会覆盖红色边框。

Answer 3

检查此http://jsfiddle.net/btyaf/3/

.selectborderchange {
    border:1px solid blue !important;   
}

toggleClass函数添加了类而不是替换，因此我在selectborderchange类的css中添加了！important，这样每当我们得到selectborderchange时，它都会覆盖另一个css。

我希望你有个主意。

Answer 4

由于选择器的特异性：id比一个类具有更多的功能。
您需要在css文件中使用此规则，因此它具有足够的特异性来更改选择的边框：#select.selectborderchange { your border}

Answer 5

http://jsfiddle.net/btyaf/8/ 这工作

HTML：

<div id="select" class="red">
  Select :
</div>

JS：

$(document).ready(function() {
  $('#select').click(function () {
    $('#optionbox').slideToggle(150);
    $(this).toggleClass('red');
    $(this).toggleClass('selectborderchange');
  });
});

CSS：

.selectborderchange {
    border:1px solid blue;
}
.red {
    border:1px solid red;
}

jquery边框更改不会出现

5 个答案: