jquery - 用图形替换文本链接(导航)

Question

我正在使用 wordpress、bootstrap 和 fontawesome 来创建导航。它固定在屏幕顶部，当用户滚动时，类 shr​​ink 被添加到具有不同 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 - 应用“收缩”类

 $(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，它也可能需要进行一些调整。如果您提供更多信息，我会尽力提供更多帮助。