메뉴가 펼쳐질 때 더하기 로고가 변경되지 않습니다.

Question

모어가 펼쳐지지 않았을 때 플러스를 표시하기 위해 다음 줄을 스타일 시트에 추가했습니다.

#block-menuprincipal li.dropdown > a[aria-expanded=false] i:before { 
    content: '\f055'; 
} 

로고가 작동하지만 내 페이지를로드 할 때 첫 번째 로고는 플러스이고 두 번째 로고는 "마이너스"입니다. 메뉴가 펼쳐지지 않고 두 로고가 모두 "플러스"여야합니다. 나는 두 개의 메뉴를 전개하고 접을 경우

, 로고는 "플러스"입니다.

페이지를 새로 고침하면 왜 두 번째 로고가 "빼기"가됩니까?

전개하고 메뉴를 접는 후, 작동합니다. 그러나 페이지를 새로 고침하면 동일한 문제가 발생합니다. 당신이 그때 그 속성을 추가 조금 힘들 것입니다, D8를 사용하는 경우,

<nav role="navigation" aria-labelledby="block-navigationprincipale-menu" id="block-navigationprincipale"> 
    <ul class="menu nav navbar-nav"> 
     <li class="expanded dropdown open"> 
     <a href="/boutique" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i> Boutiques</a> 
      <ul class="menu dropdown-menu"> 
       <li> 
        <a href="/boutique" data-drupal-link-system-path="boutique"><i class="fa fa-shopping-bag fa-lg" aria-hidden="true"></i> Boutiques</a> 
       </li> 
       <li> 
        <a href="/produit" data-drupal-link-system-path="produit"><i class="fa fa-gift fa-lg" aria-hidden="true"></i> Produits</a> 
       </li> 
       <li> 
        <a href="/service" data-drupal-link-system-path="service"><i class="fa fa-sign-language fa-lg" aria-hidden="true"></i> Services</a> 
       </li> 
      </ul> 
     </li> 
     <li class="expanded dropdown"> 
     <a href="/groupe" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i> Groupes</a> 
      <ul class="menu dropdown-menu"> 
       <li> 
        <a href="/groupe" data-drupal-link-system-path="groupe"><i class="fa fa-users fa-mg" aria-hidden="true"></i> Groupes</a> 
       </li> 
       <li> 
        <a href="/annonce" data-drupal-link-system-path="annonce"><i class="fa fa-newspaper-o fa-lg" aria-hidden="true"></i> Annonces</a> 
       </li> 
       <li> 
        <a href="/article" data-drupal-link-system-path="article"><i class="fa fa-file-text-o fa-lg" aria-hidden="true"></i> Articles</a> 
       </li> 
       <li> 
        <a href="/discussion" data-drupal-link-system-path="discussion"><i class="fa fa-comments fa-lg" aria-hidden="true"></i> Discussions</a> 
       </li> 
       <li> 
        <a href="/recette" data-drupal-link-system-path="recette"><i class="fa fa-cutlery fa-lg" aria-hidden="true"></i> Recettes</a> 
       </li> 
       <li> 
        <a href="/itineraire" data-drupal-link-system-path="itineraire"><i class="fa fa-map-signs fa-lg" aria-hidden="true"></i> Itinéraires</a> 
       </li> 
       <li> 
        <a href="/evenement" data-drupal-link-system-path="evenement"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i> Événements</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
     <a href="/profil" data-drupal-link-system-path="profil"><i class="fa fa-id-card-o fa-lg" aria-hidden="true"></i> Profils</a> 
     </li> 
    </ul> 
</nav> 

Answer 1

확인 :

여기 내 메뉴 블록입니다. 따라서 우리는 CSS만으로이 문제를 해결해야합니다. 내가 우리가 CSS 잘못을 확인할 수 있도록 메뉴의 HTML 구조를 제공 할 수

#block-menuprincipal li.dropdown > a i:before { 
     content: '\f055'; 
    } 

    #block-menuprincipal li.dropdown > a[aria-expanded=true] i:before { 
     content: '\f056'; 
    }