Javascript Java脚本：使用切换显示更多或更少_Javascript_Jquery_Html

Javascript Java脚本：使用切换显示更多或更少

javascript jquery html

Javascript Java脚本：使用切换显示更多或更少,javascript,jquery,html,Javascript,Jquery,Html,我需要一些帮助。我必须编写一个javascript代码来切换a元素的显示。如果我点击show more，它应该会显示更多，并带有一个show less链接我遇到的问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Expand/Collapse</title> <link rel="shortcut

我需要一些帮助。我必须编写一个javascript代码来切换a元素的显示。如果我点击show more，它应该会显示更多，并带有一个show less链接

我遇到的问题

<!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-latest.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.</p>
        </div>
        <div class="hide" id="bookDesc">
            <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.</p>
        </div>
        <a href="#" data-target="#bookDesc">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" id="author">
            <p>Ray Harris is much more than a JavaScript programmer.</p>
            <p>So when Ray said he wanted to write for us, it didn't take us long to hire 
            him.</p>
        </div>
        <a href="#" data-target="#author">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" id="bookDet"> 
            <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="#" data-target="#bookDet">Show more</a>                

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

1。如果我单击“显示有关作者的更多信息，不仅会显示有关作者的更多信息，还会显示有关书籍描述以及这本书的作者的更多信息。。我不想让它那样做，我只想让它向我展示更多关于那个具体问题的信息

2.它也没有向我显示或给我更少的链接选项
这是我的HTML和JavaScript代码。

$（文档）.ready（函数（）{ $（“#jdom”）。单击（函数（）{ $（“a”）.toggle（函数（）{ $（this.text（“”.sibbines（“div”）.hide（）； }，函数（）{ $（this）.text（“Less”）.sides（“div”）.show（）； }); }); }); 文章、旁白、图、插图、页脚、页眉、导航、章节{ 显示：块； } * { 保证金：0；填充：0； } 身体{ 字体系列：Verdana、Arial、Helvetica、无衬线；字体大小：87.5%；宽度：650px；保证金：0自动；边框：3件纯蓝； } 部分{ 填充：15px 25px； } h1{ 字体大小：150%； } 氢{ 字体大小：120%；填充：.25em0.25em25px； } 皮{ 显示：无； } 保险商实验室{ 左侧填充：45px； } 李{ 填充底部：.4em； } p、 a{ 填充底部：.4em；左侧填充：25px； } 展开/折叠 Murach的JavaScript和DOM脚本书名您可以从头到尾阅读其他JavaScript书籍，但仍然不能知道如何开发你想要的动态网站但现在，您可以从JavaScript初学者到DOM脚本专家，在一本书！快节奏、专业化，以及大量的专业实践新的JavaScript书关于作者 Ray Harris是一位JavaScript程序员专家。这对你来说是显而易见的只要你审查了他在本报告中提出的20份完整申请书 Ray Harris不仅仅是一个JavaScript程序员所以当雷说他想为我们写作时，我们很快就雇佣了他他这本书是给谁的由于我们独特的展示方法和本书的模块化组织，这本书适合任何想要有效使用JavaScript的web开发人员以下是可以使用这本书的人的部分名单：了解HTML和CSS并准备好掌握JavaScript的Web开发人员。在服务器端使用ASP.NET、JSP或PHP编程的Web开发人员，以及现在我想掌握客户端编码已经阅读过3或4本JavaScript或DOM脚本书籍的Web开发人员但仍然不知道如何执行中所需的DOM脚本类型实际应用程序试试这个， 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-latest.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.</p> </div> <div class="hide" id="bookDesc"> <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.</p> </div> <a href="#" data-target="#bookDesc">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" id="author"> <p>Ray Harris is much more than a JavaScript programmer.</p> <p>So when Ray said he wanted to write for us, it didn't take us long to hire him.</p> </div> <a href="#" data-target="#author">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" id="bookDet"> <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="#" data-target="#bookDet">Show more</a> </section> </body> </html> 展开/折叠 Murach的JavaScript和DOM脚本书名您可以从头到尾阅读其他JavaScript书籍，但仍然不能知道如何开发你想要的动态网站但现在，您可以从JavaScript初学者到DOM脚本专家，在一本书！快节奏、专业化，以及大量的专业实践新的JavaScript书关于作者 Ray Harris是一位JavaScript程序员专家。这对你来说是显而易见的只要你审查了他在本报告中提出的20份完整申请书 Ray Harris不仅仅是一个JavaScript程序员所以当雷说他想为我们写作时，我们很快就雇佣了他他这本书是给谁的由于我们独特的展示方法和本书的模块化组织，这本书适合任何想要有效使用JavaScript的web开发人员以下是可以使用这本书的人的部分名单：了解HTML和CSS并准备好掌握JavaScript的Web开发人员。在服务器端使用ASP.NET、JSP或PHP编程的Web开发人员，以及现在我想掌握客户端编码已经阅读过3或4本JavaScript或DOM脚本书籍的Web开发人员但仍然不知道如何执行中所需的DOM脚本类型实际应用程序我对HTML和JS做了一些修改。尝试这样使用，它可能会为您提供解决方案 $（文档）.ready（函数（）{ $（“a”）。单击（功能（e）{ e、预防默认值（）； var moreSection=$（this.parents（“.section”）.find（“.more section”）； if（$（this.text（）==“显示更多”&&moreSection.hasClass（“隐藏”））{ $（此）.text（“显示较少”）； moreSection.removeClass（“隐藏”）.addClass（“显示”）； }否则{ $（此）.text（“显示更多”） moreSection.addClass（“隐藏”）.removeClass（“显示”）； } }); }); 文章、旁白、图、插图、页脚、页眉、导航、章节{ 显示：块； } * { 保证金：0；填充：0； } 身体{ 字体系列：Verdana、Arial、Helvetica、无衬线；字体大小：87.5%；宽度：650px；边缘