Блог

У меня есть древовидный вид для отображения меню навигации на боковой панели. Когда я когда-либо нажимаю одно меню (узел дерева), для отображения выбранного узла отображается светло-голубой цвет фона. Но он исчезает, когда я снова нажимаю на тот же узел.

Я хочу, чтобы этот цвет фона оставался, когда он активен, пока не будет выбран другой другой узел.Теперь я использую псевдоклассы для решения этой проблемы, но не могу этого сделать.

Возможно ли какое-либо обходное решение, чтобы сохранить этот цвет фона?

Фрагмент кода (компонент TreeView)

 <div
    class="tree-node"
    :class="{
      active: isDragEnterNode,
      'node-selected': model.key === labelSelected ? 'true' : false
    }"
    :id="model.key"
    @mouseover="mouseOver"
    @mouseout="mouseOut"
    @click.stop="click"
    @keydown.enter.stop="click"
    role="presentation"
  > // some code </div>
 

Css для узла дерева

 .tree-node {
    display: flex;
    align-items: center;
    line-height: 14px;
    padding: 2px 8px 2px 16px;
    cursor: pointer;

    .input {
      border: none;
      max-width: 150px;
      border-bottom: 1px solid blue;
    }
    amp;:visited {
      background-color: rgba(0, 107, 221, 0.08);
    }

    amp;:active {
      outline: 2px dashed pink;
      background-color: rgba(0, 107, 221, 0.08);
    }

    .caret {
      margin-left: -16px;
      margin-right: 2px;
      font-size: var(--font-size-x-large);
      flex-grow: 0;
    }

    .operation {
      margin-left: 0;
    }
  }
 

Скриншот

Так должно быть до тех пор, пока эта ссылка не станет активной, но этот цвет фона исчезнет после второго щелчка.