jQuery toggleClass不改變css

我正在使用jQuery製作下拉菜單。旁邊的每個對象打開一個下拉有一個三角形的，像這樣：jQuery toggleClass不改變css

enter image description here
我有兩個CSS類，.caret和.u-caret。類caret看起來像一個指向下的三角形，類u-caret看起來像一個指向上。當我點擊對象時，我想讓這些類切換。

HTML：

<span id="learn">Open Dropdown <span class="caret"></span></span>

CSS：

.caret { 
     border-top:5px solid black; 
     border-left:5px solid transparent; 
     border-right:5px solid transparent; 
} 
.u-caret{ 
     border-bottom:5px solid black; 
     border-left:5px solid transparent; 
     border-right:5px solid transparent; 
}

JS：

$('#learn').click(function(){ 
     $('#learn-dropdown').toggle().css('z-index','200'); 
     $('#affiliate-content-dropdown').css('z-index','100').slideUp(); 
     $("#snippet-dropdown").css('z-index','100').slideUp(); 
     $('#stories-dropdown').css('z-index','100').slideUp(); 
     $(this).closest('.caret').toggleClass('caret').toggleClass('u-caret'); 
    });

來源

2015-04-21 TricksfortheWeb

'最接近（）'不工作的方式;它向外/向上，而不是向內。另外，請注意，一旦您切斷了'caret'，最近的（'。caret'）'在下次單擊該元素時可能無法匹配，因此您將永遠不會重新啓用它。 –

.closest看起來向上層次結構中的你想要的是找到：

$('#learn').click(function(){ 
    $(this).find('.caret').toggleClass('caret').toggleClass('u-caret'); 
});

這也不會在第一次後，因爲切換將刪除類.caret。你需要的是一個不變的類：

<span id="learn">Open Dropdown <span class="arrow caret"></span></span>

然後將找到的.arrow元素：

$('#learn').click(function(){ 
    $(this).find('.arrow').toggleClass('caret').toggleClass('u-caret'); 
});

來源

2015-04-21 20:47:30 jerrylow

第一個代碼段應該是$（this）.find（'。caret，.u-caret'）。toggleClass ....至於第二個，它看起來不錯，但是您也可以將切換方法中的類按空間。例如$（this）.find（'。arrow'）。toggleClass（'caret u-caret'） – Amir

正如我的評論指出，你不能只是搜索.caret。一旦切斷，find('.caret')不再有效。搜索任一類，切換所有你發現：

$('#learn').click(function() { 
 
    $('#learn-dropdown').toggle().css('z-index', '200'); 
 
    $('#affiliate-content-dropdown').css('z-index', '100').slideUp(); 
 
    $("#snippet-dropdown").css('z-index', '100').slideUp(); 
 
    $('#stories-dropdown').css('z-index', '100').slideUp(); 
 
    $(this).find('.caret, .u-caret').toggleClass('caret').toggleClass('u-caret'); 
 
});

.caret { 
 
    border-top: 5px solid black; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
} 
 
.u-caret { 
 
    border-bottom: 5px solid black; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<span id="learn">Open Dropdown <span class="caret"></span></span>

來源

2015-04-21 20:50:11

jQuery toggleClass不改變css

回答

相關問題