我正在使用wordpress，bootstrap和fontawesome来创建导航。它固定在屏幕顶部，当用户滚动时，类shrink会被添加到具有不同css值的标题类中。
当添加类时，我希望标题中的文本链接转向图标（fontawesome）尝试使用show / hide css但我不能直接对链接进行硬编码，因为它们是由wordpress生成的。
<div class="navbar-collapse collapse navbar-right">
<?php /* Primary navigation */
wp_nav_menu( array(
'menu' => 'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
.navbar-custom .nav>li>a {
font-size: 1.15em;
font-weight: 400;
etc...
}
编辑 - 如问题中所述，我无法直接对链接进行硬编码，因为它是由wordpress处理的
head html - 应用＆＃39;缩小＆＃39;类
$(function(){
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('header').addClass('shrink');
}
else {
$('header').removeClass('shrink');
}
});
答案 0 :(得分：0)
这可能是一种更好的方法，因为你只需要更改CSS的显示而不是html ...更少的循环。
$(document).ready(function() {
$(".nav li a .fa").css("display", "none");
$(".nav li").each(function() {
if(this.hasClass("home")) {
//add icons to your html so you can hide them
this.html("<a href='homeurl'><i class='fa fa-home'></i> <span class='text'>Home</span></a>");
}
else if(this.hasClass("next-unique-class")) {
this.html("some other icon");
}
//more else ifs for each nav icon you want to add
}
});
$(window).scroll(function() {
//Apply and remove the shrink class depending on if you're at the
//top of the page or not. Not sure if you have this or not.
if($(window).scrollTop() == 0) {
$("your #header-id or .header-class").removeClass("shrink");
}
else {
$("your #header-id or .header-class").addClass("shrink");
}
//Hide icon and display text or vice versa
if(".header").hasClass("shrink") {
$(".nav li a .fa").css("display", "inline");
$(".text").css("display", "none");
}
else {
$(".nav li a .fa").css("display", "none");
$(".text").css("display", "inline");
}
});
这可能有点长，因为我还没有多少使用WordPress，但我相信（根据这个source）每个li都有自己的类。使用JQuery，您可以在用户滚动时应用检查：
$(window).scroll(function() {
//Apply and remove the shrink class depending on if you're at the
//top of the page or not. Not sure if you have this or not.
if($(window).scrollTop() == 0) {
$("your #header-id or .header-class").removeClass("shrink");
}
else {
$("your #header-id or .header-class").addClass("shrink");
}
//Go through each li in the nav
$(".nav li").each(function() {
//If header has shrink, replace this li's text with an icon
//depending on its unique class
if($("your #header-id or .header-class").hasClass("shrink") {
if(this.hasClass("home")) {
//random icon
this.html("<a href='homeurl'><i class='fa fa-home'></i></a>");
}
else if(this.hasClass("next-unique-class")) {
this.html("some other icon");
}
//more else ifs for each nav icon you want to replace
}
else {
//Check which li this is and put back original
//text if the header does not have shrink
if(this.hasClass("home")) {
this.html("Original Home Link + text");
}
else if(this.hasClass("next-unique-class")) {
this.html("Original Link + text");
}
//more else ifs for each
}
});
});
这真的很粗糙，我现在无法测试它，但希望它可以在某种程度上帮助你。我非常怀疑它是你问题的100％解决方案，即使你输入了正确的类和ID之后，它也可能需要一些调整。如果您提供更多信息，我可以尝试提供更多帮助。
答案 1 :(得分：0)
你可以用CSS做到这一点。您需要的是将根据具有shrink类的元素的存在处理的样式规则。如果它存在于标题中，则样式会将链接font-size属性设置为零以“隐藏”文本，并使用::before选择器设置content属性中的图标和图标的font-size使他们不会“隐藏”前一个设置的零尺寸。
由于您将拥有多个链接，因此您可能需要使用:nth-child来正确设置每个图标。
参见示例（here is the jsfiddle）：
CSS
/* set the font size of the link to zero to 'hide' the text */
.shrink a
{
font-size: 0px;
}
/* set the font size of the icons to override the 0px of the previous rule */
.shrink a::before
{
font-size: 20px;
}
/* set the icon of the first menu entry */
.shrink a:nth-child(1)::before
{
content: "@";
}
/* set the icon of the second menu entry */
.shrink a:nth-child(2)::before
{
content: "#";
}
/* and so on... */
这是一个效果很好的HTML示例：
HTML 的
<!-- when you put the 'shrink' class here the magic occurs -->
<div class="nav">
<a href="#">Entry 1</a>
<a href="#">Entry 2</a>
</div>
* * *编辑* * *
由于nth-child是一个CSS3选择器而且有些旧的 - 但仍处于活动状态 - 浏览器可能无法正常支持它，您可以检查是否可以将图标设置为每个菜单链接中的数据属性，以便我们可以使用以下css规则替换此选择器：
CSS
/* set the font size of the link to zero to 'hide' the text */
.shrink a
{
font-size: 0px;
}
/* set the icon and font size to override the 0px of the previous rule */
.shrink a::before
{
font-size: 20px;
content: attr(data-icon);
}
HTML 的
<!-- when you put the 'shrink' class here the magic occurs -->
<div class="nav">
<a href="#" data-icon="@">Entry 1</a>
<a href="#" data-icon="#">Entry 2</a>
</div>