Блог

Я работаю над проектом AngularJS. Это магазин, в котором есть панель поиска и профиль, значок корзины рядом с ним.

Когда я нажимаю на панель поиска, она расширяется вправо и перекрывает нужные значки. И когда это происходит, количество товаров в корзине по-прежнему отображается.

Мне нужно, чтобы количество товаров в элементе корзины исчезало, когда строка поиска «активна». Можете ли вы дать мне какой-либо совет о том, как я могу это сделать? Я читал об hasElement() этом, но, похоже, здесь это не решение.

Код:

HTML

  <div id="ch-shopping-cart-icon-container" class="ch-shopping-cart">
    <div class="ch-shopping-cart-icon" role="button" aria-label="Shopping Cart">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 36 36"><path 
      d="..."/>
      </svg>
    </div>
    <div class="ch-shopping-cart-counter"></div>
 </div>

 <div id="ch-search-box-wrap">
   
   <here injects the search bar component>

 </div>
  

CSS

 @media (min-width: 768px) {
        #ch-search-box-wrap:active,
        #ch-search-box-wrap:focus-within {
          padding-right: 0;
          z-index: 9999;
          right: -10px;
        }
      }
      #ch-search-box-wrap {
        position: absolute;
        z-index: 999;
        height: 56px;
        width: 100%;
        margin: auto;
        display: block;
        max-width: 750px;
        padding-right: 95px;
        right: 0;
        transition: .2s;
      }
  

Я бы использовал что-то вроде ng-if для ch-shopping-cart-counter . Если #ch-search-box-wrap:active тогда не показывать. Если не активен, то отображается.

Спасибо!