將類更改爲ID時不起作用

我試圖創建一個單擊時切換div的函數。將類更改爲ID時不起作用

我發現了一個現有的Jfiddle，它是我之後的東西，並對它進行了調整。

所有工作正常，除了我需要.search-nav類是一個ID，但是當我改變它的功能停止工作。

我試過各種組合，但無濟於事。

工作版本在這裏：

$(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'); 
    }); 

});

我在做什麼錯？

來源

2016-04-27 Adam C

這是因爲#someId比.someClass有更大的specificity。

從MDN：

選擇器類型的下面的列表是通過增加特異性：

類型選擇器（例如，H1）和僞元素（例如，：前）。

類別選擇符（例如.example），屬性選擇符（例如， [type =「radio」]）和僞類別（例如：懸停）。

ID選擇符（例如#example）。

你可以從

.drop

在CSS選擇器更改爲

#search-nav.drop, .drop

Fixed Fiddle

來源

2016-04-27 13:08:05

問題是由於drop CSS類的特異性。當您將search-nav元素更改爲其id的樣式時，id選擇器會覆蓋由類應用的任何樣式。因此，您需要通過將ID預先添加到它來增加.drop規則的特定性。試試這個：

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

Updated fiddle

來源

2016-04-27 13:08:12

這是特異性的問題。您需要在CSS中同時使用id和class目標：

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

您在兩個#search-nav和.drop使用height。由於.drop不太具體，它適用於#search-nav的屬性。爲了提高特異性，您還需要添加id選擇器，例如#search-nav.drop。

這將幫助你理解：

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

來源

2016-04-27 13:09:31

將類更改爲ID時不起作用

回答

相關問題