0

我正在研究 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然后不显示。如果未激活，则显示。

谢谢！

4

0 回答 0