Question

我在样式表中添加了以下行，以便在未展开割草机时显示加号。

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

Answer 1

好的，如果您使用的是D8，那么添加该属性会有点困难。所以我们应该尝试通过CSS来解决这个问题。你可以用我在下面提供的内容替换你的CSS吗

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

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

展开菜单时，加号徽标不会更改

1 个答案: