当菜单展开时,徽标不会改变
问题描述:
我在样式表中添加了以下行,以便在割草机未展开时显示加号。当菜单展开时,徽标不会改变
#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>
答
好吧,如果你正在使用D8,那么这将是一个有点难以添加属性。所以我们应该尝试通过CSS来解决这个问题。 你能有什么,我提供以下
#block-menuprincipal li.dropdown > a i:before {
content: '\f055';
}
#block-menuprincipal li.dropdown > a[aria-expanded=true] i:before {
content: '\f056';
}
+0
谢谢你的工作;-) –
+0
不客气。 – Bharat
你能提供你的菜单的HTML结构,这样我们就可以检查什么是错的CSS取代你的CSS? – Bharat
好的,我检查了你的网站。问题是,如果您要检查该菜单的第二个元素,则锚定标记不会添加aria-expanded =“false”属性。所以你必须在那里编程添加。 – Bharat
@Bharat我使用drupal 8我该怎么做? –