jquery - 将类更改为 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具有更大的specificity比 .someClass.

来自 MDN:

The following list of selector types is by increasing specificity:

• Type selectors (e.g., h1) and pseudo-elements (e.g., :before).

• Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).

• ID selectors (e.g., #example).

您可以更改 CSS 中的选择器

.drop

至

#search-nav.drop, .drop

Fixed Fiddle