修改

Question

我正在使用wordpress，bootstrap和fontawesome来创建导航。它固定在屏幕顶部，当用户滚动时，类shrink会被添加到具有不同css值的标题类中。

当添加类时，我希望标题中的文本链接转向图标（fontawesome）尝试使用show / hide css但我不能直接对链接进行硬编码，因为它们是由wordpress生成的。

HTML - 导航

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

CSS

.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');
    }
  });

Answer 1

修改

这可能是一种更好的方法，因为你只需要更改CSS的显示而不是html ...更少的循环。

JQuery的

$(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，您可以在用户滚动时应用检查：

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之后，它也可能需要一些调整。如果您提供更多信息，我可以尝试提供更多帮助。

Answer 2

你可以用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>

用图形替换文本链接（导航）

HTML - 导航

CSS

2 个答案:

修改

JQuery的

原帖

JQuery的