Question

我有三个段落，每个段落都有＆＃34;显示更多＆＃34;如果他们点击＆＃34;显示更多＆＃34;链接。当点击每个链接时，它应该来回读取＆＃34;显示更多＆＃34;或＆＃34;显示更少＆＃34;。

我基本上使用.toggle（）进行设置，但它不适用于单个链接。所以当你点击一个时，它们都会改变。我还必须改为阅读＆＃34;显示更少，＆＃34;但不能让它在＆＃34; Show More＆＃34;之间来回走动。和＃34;显示更少＆＃34;之后。

＆＃34;隐藏＆＃34;在CSS顺便说一下，class设置为display：none。

我想我已经接近了，但对这两个问题的任何帮助或建议都将不胜感激：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Expand/Collapse</title>
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" href="index.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="subset_expansion.js"></script>     
</head>

<body>
    <section id="jdom">
        <h1>Murach's JavaScript and DOM Scripting</h1>
        <h2>Book description</h2>
        <div>
            <p>You can read other JavaScript books from start to finish and still not
            know how to develop dynamic websites like you want to. That's because 
            it's DOM scripting that lets you do things like run slide shows, handle image
            rollovers, rotate headlines, provide animation, and more. And it's a subject 
            that's glossed over or ignored in most other books.</p>
        </div>
        <div class="hide">
            <p>But now, you can go from JavaScript beginner to DOM scripting expert in a 
            single book! Fast-paced, professional, and packed with expert practices, our 
            new JavaScript book guides you through each step as you learn how to program 
            sites that enhance the user experience and ensure browser compatibility.</p>
        </div>
        <a href="#">Show more</a>           

        <h2>About the author</h2>
        <div>
            <p>Ray Harris is an expert JavaScript programmer. That will be obvious to you 
            as soon as you review the 20 complete applications that he presents in this 
            book.</p>
        </div>
        <div class="hide">
            <p>Ray Harris is much more than a JavaScript programmer. He has a Master's degree 
            in Computer Science and Artificial Intelligence. He worked on advanced 
            research projects at the Air Force Research Lab while he was in the USAF. 
            He taught information security and web development at the College of 
            Technology in Raleigh, North Carolina. In fact, Ray has been programming 
            and teaching since he was 12 years old.</p>
            <p>So when Ray said he wanted to write for us, it didn't take us long to hire 
            him. Not only did he have the technical skills that we were looking for, 
            but his previous writings showed that he had an uncommon ability to think, 
            write, and teach.</p>
        </div>
        <a href="#">Show more</a>

        <h2>Who this book is for</h2>
        <div>
            <p>Due to our unique presentation methods and this book's modular organization,
            this is the right book for any web developer who wants to use JavaScript effectively.</p>
        </div>
        <div class="hide"> 
            <p>Here's just a partial list of who can use this book:</p>
            <ul>
                <li>Web developers who know HTML and CSS and are ready to master JavaScript.</li> 
                <li>Web developers who program in ASP.NET, JSP, or PHP on the server side and 
                now want to master client-side coding.</li>
                <li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books 
                but still don't know how to do the type of DOM scripting that's required in 
                real-world applications</li>
            </ul>
        </div>
        <a href="#">Show more</a>               

    </section>
</body>
</html>

subset_expansion.js：

$(document).ready(function(){
    $("a").click(function(){    
    $(".hide").toggle();
    $(this).text("Show Less");
  });
});

Answer 1

你现在已经解决了这个问题，但如果不是，我认为这就是你想要的：

在“a”上使用触发器，并为“a”和“div”提供ID，如：

<a> : <a id="aId" onclick="functionA()">Show more</a>
<div> : <div id="aDiv>

然后让js像这样

function functionA() {
    document.getElementById('aId').innerText = document.getElementById('aId').innerText == "Show more" ? "Show less" : "Show more"
    document.getElementById('aDiv').style.display = document.getElementById('aDiv').style.display == "block" ? "none" : "block"
}

或者你可以使用if condition：

function functionA() {
    if(document.getById('aId').innerText = "Show more") document.getElementById('aId').innerText = "Show less" 
    else document.getElementById('aId').innerText = "Show more"

    ...
}

展开和折叠/显示更多，显示更少

1 个答案: