當菜單展開時，徽標不會改變

我在樣式表中添加了以下行，以便在割草機未展開時顯示加號。當菜單展開時，徽標不會改變

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

該徽標可以工作，但當我加載我的頁面時，第一個徽標是加號，第二個徽標是「減號」。菜單不展開，兩個標誌都應該是「加號」。

如果我展開了兩個菜單和摺疊他們的標誌是「加號」。

如果我重新加載頁面，爲什麼第二個徽標是「減號」？

展開和摺疊菜單後，它的工作原理。但是，如果我重新加載頁面，我有同樣的問題。

這裏是我的菜單塊：

<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>

來源

2017-11-18 J. Doe

你能提供你的菜單的HTML結構，這樣我們就可以檢查什麼是錯的CSS取代你的CSS？ – Bharat

好的，我檢查了你的網站。問題是，如果您要檢查該菜單的第二個元素，則錨定標記不會添加aria-expanded =「false」屬性。所以你必須在那裏編程添加。 – Bharat

@Bharat我使用drupal 8我該怎麼做？ –

好吧，如果你正在使用D8，那麼這將是一個有點難以添加屬性。所以我們應該嘗試通過CSS來解決這個問題。你能有什麼，我提供以下

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

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

來源

2017-11-18 07:33:35 Bharat

謝謝你的工作;-) –

不客氣。 – Bharat

當菜單展開時，徽標不會改變

回答

相關問題