jquery - 将类更改为ID时功能不起作用

我正在尝试创建一个在单击时切换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');
    });

});

我究竟做错了什么？

最佳答案

这是因为#someId的specificity比.someClass大。

从MDN：


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


类型选择器（例如h1）和伪元素（例如：before）。
类选择器（例如.example），属性选择器（例如
[type =“ radio”]）和伪类（例如：hover）。
ID选择器（例如，＃example）。



您可以从

.drop

至

#search-nav.drop, .drop

Fixed Fiddle

关于jquery - 将类更改为ID时功能不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36890736/