jQuery toggleClass不改变css

Question

我正在使用jQuery制作下拉菜单。在每个对象旁边打开一个下拉列表，有一个三角形，如下所示：

 我有两个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');
    });

Answer 1

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

Answer 2

如我的评论中所述，您无法搜索.caret。切换后，find('.caret')不再有效。搜索任一课程，切换所有找到的内容：

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;