仅针对当前所选表格标题的切换箭头

如何仅针对当前选定的表格标题（就像颜色仅针对所选标题更改一样），以便其旁边的箭头是唯一被切换为旋转的箭头点击？仅针对当前所选表格标题的切换箭头

<table class="container cf"> 
    <thead class="cf"> 
    <tr> 
     <th class="numeric">amount <i class="glyphicon glyphicon-triangle-bottom"></i></th> 
     <th class="numeric">case <i class="glyphicon glyphicon-triangle-bottom"></i></th> 
     <th class="numeric">field 3 <i class="glyphicon glyphicon-triangle-bottom"></i></th> 
     <th class="numeric">field 4 <i class="glyphicon glyphicon-triangle-bottom"></i></th> 
     <th class="numeric">location <i class="glyphicon glyphicon-triangle-bottom"></i></th> 
     <th class="numeric">date <i class="glyphicon glyphicon-triangle-bottom"></i></th> 
    </tr> 
    </thead> 
    <tbody class="verdicts"> 
    <tr> 
     <td data-title="amount" class="amount">8,570,000.00<span class="result"></span></td> 
     <td data-title="case">title</td> 
     <td data-title="practice area">area</td> 
     <td data-title="user">Bob jones</td> 
     <td data-title="location">Orlando, FL</td> 
     <td data-title="date">Mar 6, 2017</td> 
    </tr> 
    <tr> 
     <td data-title="amount" class="amount">$447,115<span class="result"></span></td> 
     <td data-title="case">Another title</td> 
     <td data-title="practice area">area</td> 
     <td data-title="user">Joe Smith</td> 
     <td data-title="location">Orlando, FL</td> 
     <td data-title="date">Mar 6, 2017</td> 
    </tr> 
    </tbody> 
</table>

jQuery的

$(".numeric").click(function() { 
    $(".numeric").removeClass('numeric-active'); 
    $(this).toggleClass("numeric-active"); 
    $(".glyphicon-triangle-bottom").toggleClass("rotate"); 
});

的jsfiddle：LINK

来源

2017-04-14 Matt

试试下面的代码

$(".numeric").click(function() { 
    $(".numeric").removeClass('numeric-active'); 
    $(this).toggleClass("numeric-active"); 
    $(this).find('i').toggleClass("rotate"); 
});

这里是工作的jsfiddle：https://jsfiddle.net/mrdag8bk/8/

来源

2017-04-14 14:30:31 selvarajmas

找到元素的上下文中的元素活动在触发：

$(".glyphicon-triangle-bottom", this).toggleClass("rotate");

或者

$(this).find(".glyphicon-triangle-bottom").toggleClass("rotate");

JSFiddle

来源

2017-04-14 14:19:40 George

的问题是，红色应该被删除从前面单击另一个标题时狡猾点击标题。 – Matt

@Matt这是我可以看到的行为。 – George

我看到它现在做的是正确的事情，但它与其他解决方案做同样的事情：将一个:: before伪类应用于该单词，所以在切换单词的左侧显示一个框。 – Matt

$(".numeric").click(function() { 
    $(".numeric").removeClass('numeric-active'); 
    $(this).toggleClass("numeric-active"); 
    $(this).children("i").toggleClass("rotate"); 
});

https://jsfiddle.net/mrdag8bk/7/

来源

2017-04-14 14:20:24

这只是我正在寻找的东西，除了在切换时在标题左侧看到一个小框时，这看起来像是丢失的图形。所有它应该做的是在点击时旋转箭头，而不是在伪类之前应用任何::。 – Matt

仅针对当前所选表格标题的切换箭头

回答

相关问题