如果有课程，则应用剩余的保证金

debugcn 发表于 Dev

DevSem

因此，我创建了自己需要的解决方案，但是却变成了我无法解决的另一个问题。

所以这是我想要达到的目标：

我想定义margin-left: 60px到.dropdown-content:after如果下拉了一个类的组合<div class="dropdown is-right">。
否则，我想定义margin-top: -11px上.dropdown-content:after，如果下拉没有is-right如<div class="dropdown">。

我尝试过所有帮助，但我似乎无法解决。

这是HTML：

<div class="dropdown is-right">
    <div class="dropdown-trigger">
    <?php if ($user): ?>
    <a class="navbar-item level is-mobile" aria-haspopup="true" aria-controls="dropdown-menu2">
        <p>Test</p>
    </a>
    <?php endif; ?>
    </div>
    <div class="dropdown-menu" id="dropdown-menu2" role="menu">
        <div class="dropdown-content">
            <a href="#" class="dropdown-item">
                My Profile
            </a>
            <a href="#" class="dropdown-item">
                Settings
            </a>
        </div>
    </div>
</div>

这是SASS：

.dropdown
  &.is-right

  .dropdown-content

    &:after
      content: ''
      position: absolute
      top: 0
      left: 35%
      margin-left: 60px
      margin-top: -11px
      width: 0
      z-index: 1
      height: 0
      border-bottom: solid 15px #FFF
      border-left: solid 15px transparent
      border-right: solid 15px transparent

牛ob

用普通CSS进行处理的方式相同：连接同一元素上的类。

.dropdown
  .dropdown-content
    &:after
      // This compiles to: .dropdown .dropdown-content:after
      content: ''
      position: absolute
      top: 0
      left: 35%
      margin-top: -11px
      width: 0
      z-index: 1
      height: 0
      border-bottom: solid 15px #FFF
      border-left: solid 15px transparent
      border-right: solid 15px transparent

  &.is-right
    .dropdown-content
      &:after
        // This compiles to: .dropdown.is-right .dropdown-content:after
        margin-top: 0
        margin-left: 60px

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。