问题

移植横竖屏切换逻辑以后，发现setting里面的开关handle消失了。

分析

setting是基于html5实现的，git log发现代码有改动，html部分代码如下

1
2
3
4
5
6

<label class="toggle toggle-green item-toggle-main" effect-playabled="true" ng-click="">
    <input type="checkbox" ng-change="checkFlightMode()" ng-model="flightModeState.checked" id="flightModeId" ng-disabled="flightModeToggleDisabled">
    <div class="track">
        <div class="handle"></div>
    </div>
</label>

很简单的html实现，查看class对应的css发现

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.toggle .track {
  width: 4.5rem;
  height: 2.2rem;

  -webkit-transition-duration: 0s;
          transition-duration: 0s;

  border: .1rem solid #e6e6e6;
  background: #e6e6e6;
  left: auto;
  right: 1.2rem;
  position: absolute;
}

最后三行是新加的代码，修改了track的位置计算方法，对应的handle却没有修改，从而导致了差异。

相关知识

  • 一个元素同时使用多个类选择器，后者覆盖前者的相同属性
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<style> 
.user
{
    font-size: 30px;
    background-color:red;
}
.login
{
    background-color:blue;
}
</style>
</head>
<body>

<div class='user'>你好。这是一个 DIV 元素，class='user'。</div>
<div class='login'>你好。这是一个 DIV 元素，class='login'。</div>
<div class='user login'>你好。这是一个 DIV 元素，class='user login'。</div>

</body>
  • css类选择器，空格分隔表示从属关系，否则表示同时具备
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

HTML：
<div class="nav">
    <div class="w">
        <div class="user-info">
            <span class="user not-login">
                <span class="link js-login">登录</span>
                <span class="link js-register">注册</span>
            </span>
            <span class="user login">
                <span class="link-text">
                    欢迎，
                    <span class="username"></span></span>
                <span class="link">退出</span>
            </span>
        </div>

        <!-- 右侧的导航链接 -->
        <ul class="nav-list">
            <li class="nav-item">
                <a class="link" href="./cart.html">
                    <i class="fa fa-shopping-cart"></i>
                    购物车(<span class="cart-cont">0</span>)
                </a>
            </li>
            <li class="nav-item">
                <a class="link" href="./order-list.html">我的订单</a>
            </li>
            <li class="nav-item">
                <a class="link" href="./user-center.html">我的MMall</a>
            </li>
            <li class="nav-item">
                <a class="link" href="./about.html">关于MMall</a>
            </li>
        </ul>
    </div>
</div>

CSS：
.nav{
    background: #eee;
    height: 30px;
    line-height: 30px;
}

/* 用户部分 */
.nav .user{
    float: left;
}
.nav .user.login{
    display: none;
}
.nav .user .link{
    margin-right: 5px;
}

/* 导航链接部分 */
.nav .nav-list{
    float: right;
}
.nav .nav-list .nav-item{
    display: inline-block;
    margin-left: 5px;
}

.nav .user（中间有空格）匹配到class含有nav的元素下面的class含有user的元素，是<span class="user not-login">和<span class="user login">。
.user.login（中间没有空格）匹配到class同时含有user和login的元素，是<span class="user login">。
.nav .user.login（.nav和.user中间有空格，.user和.login中间没有空格）匹配到class含有nav的元素下面的class同时含有user和login的元素，是<span class="user login">。

修复

鉴于handle位于toggle内部，修改对应的css，添加后面4行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.toggle .handle {
  top: 16px;
  left: 297px;
  width: 1.8rem;
  height: 1.8rem;

  transition: 0.3s cubic-bezier(0, 1.1, 1, 1.1);

  box-shadow: none;

  top: 0.1rem;
  left: 0.2rem;
  right: 1.2rem;
  position: absolute;
}