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

回答

相关问题