Question

我的页脚会根据屏幕宽度进行更改，因此当它低于1000px时，我将所有社交媒体链接作为文本以块格式显示，但是当超过1000px时，我将社交媒体链接替换为徽标并变为内联。我现在拥有它的方式效果很好，除了它从ex）700px到500px调整大小的事实它增加了另一个链接，因此添加了多个“twitter”链接，如（twitter twitter twitter）。我只希望在前一个屏幕大小大于1000并且低于它时添加它。目前我正在使用'append.to'，因此我可以在屏幕尺寸发生变化时添加span标记

$(document).ready(function() {

    $('#nav-mobile ul').hide();
    $('#socialbtns').removeClass("socialbtns");
    $('#ig').removeClass("fa fa-md fa-instagram");
    $('#twitter').removeClass("fa fa-md fa-twitter");
    $('#linkin').removeClass("fa fa-md fa-linkedin");
    $('#trademark').removeClass("footer3");
    $('#nav-mobile').click(function(e) {
        if (!$(e.target).is('#nav-mobile ul > li >a')) {
            e.preventDefault();
            $('#nav-mobile ul').slideToggle();
        }
    });
    resize();
    $(window).resize(function() {
        resize();
        if (window.matchMedia("(max-width: 999px)").matches) {
            $(' <span> Instagram </span>').appendTo("#ig");
            $(' <span> Twitter </span>').appendTo("#twitter");
            $('<span> LinkedIn </span>').appendTo("#linkin");
            $('#trademark').addClass("footer3");
        }
    });
});


function resize() {

    if (window.matchMedia("(min-width: 1000px)").matches) {
        $('#nav-mobile').hide();
        $('#socialbtns').addClass("socialbtns");
        $('#ig').addClass("fa fa-md fa-instagram");
        $('#twitter').addClass("fa fa-md fa-twitter");
        $('#linkin').addClass("fa fa-md fa-linkedin");
        $('span').remove();
        $('#trademark').removeClass("footer3");
    } else {
        $('#nav-mobile').show();
        $('#socialbtns').removeClass("socialbtns");
        $('#ig').removeClass("fa fa-md fa-instagram");
        $('#twitter').removeClass("fa fa-md fa-twitter");
        $('#linkin').removeClass("fa fa-md fa-linkedin");
        $('#trademark').addClass("footer3");
    }

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css">
    <link rel="stylesheet" type="text/css" href="stylesheets/main.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>

<body>
    <!-- Menu Icon -->
    <div class="wrapper">
        <nav id="nav-mobile">
            <a>Menu</a>
            <ul>
                <li><a href="bio.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="photos.html">Photography</a></li>
            </ul>
        </nav>

        <!-- Home Page -->
        <div class="img-container border">
            <header class="main-header">
                <div class="title">
                    <div class="name"> Luis Rodriguez </div>
                    <div class="services"> Web Developer & Photographer </div>
                </div>
            </header>
        </div>
    </div>


    <!-- Content Section -->
    <div class="container">
        <div class="section1">
            <img src="images/pg1.jpg" alt="Photography">
            <div class="titles"> Photography </div>
            <p> In this era a photo does much more than merely remind us of a moment. It has by far become one of the most diverse forms of influence. We capture pictures of loved ones and bring tears of joy years later, while on the other hand busiensses
                rely on a picture to convey a "million words" to potential clients. Regardless of your story, the right photo should amaze you every time you see it.
            </p>
            <div class="title-button">
                <a href="photos.html"> My Photos </a>
            </div>
        </div>

        <div class="section2">
            <img src="images/img1.jpg" alt="Code">
            <div class="titles"> WebDev </div>
            <p> When you ask someone to browse something online you really never know what they'll use anymore. You can have one person pull out their phone, another use a tablet, you've got someone on a desktop, and there may even be someone using their
                TV. Having a dynamic website is vital to ensuring that who ever is visiting your site can have a clean simple view to your page regardless of where they see it.
            </p>
            <div class="title-button">
                <a href="code.html">My Code</a>
            </div>
        </div>
    </div>


    <footer class="main-footer">
        <div class="footer1">
            <a href="bio.html">About</a>
            <a href="contact.html">Contact</a>
        </div>
        <div class="footer2">
            <div class="socialbtns" id="socialbtns">
                <a target="_blank" href="https://www.twitter.com/baesicmedia" id="twitter" class="fa fa-md fa-twitter"><span id="twitter-text">Twitter</span></a>
                <a target="_blank" href="#" id="linkin" class="fa fa-md fa-linkedin"><span> LinkedIn</span></a>
                <a target="_blank" href="https://www.instagram.com/baesicfrs/" id="ig" class="fa fa-md fa-instagram"><span> Instagram</span></a>
            </div>
            <div id="trademark" class="footer3">
                &copy;2017 Baesic Media
            </div>
        </div>
    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/jquery-3.2.0.min.js"></script>
    <script type="text/javascript" src="javascript/main.js"></script>
</body>

</html>

仅在从大于1000px的屏幕宽度调整到1000px以下的值时执行操作

0 个答案: