阅读/更多 Less Not Working - JS、Jquery、Bootstrap-4

Question

我只是想创造一种轻量级的体验，当点击“阅读更多”链接时会显示一个段落，然后在点击“阅读更少：链接”时关闭。

我对 JS 和 JQuery 的了解非常有限。我目前正在使用 Bootstrap4 并通过https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js 调用 JQuery 3.5.1。我将我的 JS 放在我通过我的 HTML 调用的外部文件中。

我当前使用的代码是由另一个开发人员为我编写的，用于我工作的另一个 Bootstrap 站点。 “阅读更多”“阅读更少”切换正在工作，但我无法弄清楚如何让它显示“阅读更多”被点击。

这里是：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
            integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="C:\Users\Ldchavez\Desktop\dailey_portfolio\resources\index.css" />
        <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,800;1,300&display=swap">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
            crossorigin="anonymous"></script>
        <script type="text/javascript" src="C:\Users\Ldchavez\Desktop\dailey_portfolio\resources\index.js"></script>
        </script>
    </head>
    
    <body>
        <div class="container-fluid">
            <div class="row align-middle">
                <div class="col-12 col-md-4 background-color1 ">
                    <div class="row mt-5 ml-4">
                        <div class="col-3 px-0">
                            <img class="img-fluid rounded-circle" width="300"
                                src="C:\Users\Ldchavez\Desktop\dailey_portfolio\images\hero.png"
                                alt="s, wearing a tan suit jacket on a blue background">
                        </div>
                        <div class="col-9 align-self-center">
                            <h1 class="ml-3">Hello.</h1>
                            <h2 class="ml-3">I'm Name</h2>
                        </div>
                    </div>
    
                    <div class="col-12 my-4 px-5 text-justify">
                        <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                            ullamco...
                        </p>
                        <span class="read-more" style="display: none;">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation ullamco...</p>
                        </span>
                        <a class="expand" data-more="0" href="javascript:void(0);" onclick="expandText(this);">Read More</a>
                    </div>
                </div>
                <div class="col-12 col-md-8 px-5">
                    <div class="row">
                        <div class="col-12 col-md-6 my-3 px-3">
                            <div class="card" style="width: 100%">
                                <img class="card-img-top" src="http://via.placeholder.com/1200x1200" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make up the
                                        bulk of the card's content.</p>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 my-3 px-3">
                            <div class="card" style="width: 100%">
                                <img class="card-img-top" src="http://via.placeholder.com/1200x1200" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make up the
                                        bulk of the card's content.</p>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6 my-3 px-3">
                            <div class="card" style="width: 100%">
                                <img class="card-img-top" src="http://via.placeholder.com/1200x1200" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make up the
                                        bulk of the card's content.</p>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 my-3 px-3">
                            <div class="card" style="width: 100%">
                                <img class="card-img-top" src="http://via.placeholder.com/1200x1200" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make up the
                                        bulk of the card's content.</p>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

#more { display: none; }

JS

function expandText(el) { 
    if (el.getAttribute('data-more') == 0) { 
        el.setAttribute('data-more', 1); 
        el.innerHTML = 'Read Less'; 
        el.previousSibling.style.display = 'inline'; 
    } else if (el.getAttribute('data-more') == 1) { 
        el.setAttribute('data-more', 0); 
        el.innerHTML = 'Read More'; 
        el.previousSibling.style.display = 'none'; 
    }
}

Answer 1

这是 w3 的做法：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>

<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<a href='#' onclick="myFunction()" id="myBtn">Read more</a>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

</body>
</html>