将类更改为ID时，函数不起作用

Question

我试图创建一个在点击时切换div的功能。

我找到了一个现有的Jfiddle，这就是我所追求的并调整它。

一切正常，但我需要.search-nav类作为ID，但是当我更改它时，函数就会停止工作。

我尝试了各种组合但无济于事。

工作版本在这里：

http://jsfiddle.net/8rLmokp1/22/

$(function(){
  var mglass = $('.magnifying-glass');
  var div = $('.search-nav');

    mglass.click(function(){
        div.toggleClass('drop');
    });

});

带ID（不工作）的版本在这里：

http://jsfiddle.net/8rLmokp1/23/

$(function(){
  var mglass = $('.magnifying-glass');
  var div = $('#search-nav');

    mglass.click(function(){
        div.toggleClass('drop');
    });

});

我做错了什么？

Answer 1

这是因为#someId的{​​{3}}比.someClass更高。

来自MDN：

  

以下选择器类型列表是通过提高特异性来实现的：

     

  

• 类型选择器（例如，h1）和伪元素（例如：之前）。

  

• 类选择器（例如.example），属性选择器（例如，   [type =＆＃34; radio＆＃34;]）和伪类（例如：hover）。

  

• ID选择器（例如，＃example）。

  

您可以从

更改CSS中的选择器

.drop

到

#search-nav.drop, .drop

specificity

Answer 2

问题是由于drop CSS类的特殊性。当您更改要由其search-nav设置样式的id元素时，id选择器会覆盖类应用的任何样式。因此，您需要通过在其前面添加id来增加.drop规则的特异性。试试这个：

#search-nav.drop {
    width: 200px;
    height: 100px;
}

all formatting options

Answer 3

这是特异性问题。您需要使用CSS中的id和class进行定位：

#search-nav.drop {
  width: 200px;
  height: 100px;
}

您在height和#search-nav中都使用.drop。由于.drop不太具体，因此它会应用#search-nav的属性。要提高特异性，您还需要添加id选择器，例如#search-nav.drop。

这有助于您理解：

更新小提琴：http://jsfiddle.net/npu8vkbo/