Question

我从未使用过CSS，通过点击向上箭头和箭头向下切换元素，但css有一些问题，我想解决这个问题：箭头应如下表所示：http://en.wikipedia.org/wiki/List_of_countries_by_foreign-born_population

可以给出/修改类名。

<span class="arrows">
    <span ng-hide="field == 'name'  order" class="arrow-down"></span>
    <span ng-hide="field == 'name' && !order" class="arrow-up"></span>
</span>

我的代码的小提琴： http://jsfiddle.net/vyy883Lp/4/

感谢您的帮助。

Answer 1

代码有很多错误：
注意：您可以通过打开chrome开发人员工具（或您使用的任何浏览器）来检查编译器错误 - 并通过堆栈跟踪提醒您

Angular模块未声明
指令中的错误需要修复 -
和arrow（雪佛龙）元素需要相互带来inline
arrow元素必须为block - 所以它们堆叠
还有....

代码中的逻辑需要更改

在我的代码中，当应用up和down个CSS类时，两个箭头都会显示。要应用CSS类，ng-class对象中的值必须为true。为了获得切换效果，它们必须彼此相对定位，然后在使用ng-click时设置为循环。
但他们同时需要开始，所以我在clean内添加了OR变量和ng-class开关，以确保在页面首次加载。

这是一个有用的演示 - 类似于您链接到的维基百科页面。
http://jsbin.com/wequmipide/1/edit?html,css,output

Answer 2

将箭头跨度的显示类型设置为内联块。这意味着您可以修改大小，边距，但元素仍保留在文本流中。我建议使用text-align：middle - 这样看起来更干净。

见这里：http://jsfiddle.net/zy9468LL/

.arrow-up {
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        vertical-align:middle;
        border-bottom: 5px solid black;
    }

此外，删除wrapper-element（span类“箭头”）并仅使用动态类设置一个span。

<span class="{'arrow-up' : field == 'name' && !order, 'arrow-down' : field == 'name' && order }"></span>

CSS：修复向上/向下箭头CSS

2 个答案:

代码中的逻辑需要更改