Question

我需要一些帮助。我必须编写一个javascript代码，它将更多或更少地切换元素。如果我点击显示更多，它应该显示更多的链接显示更少。

我遇到的问题

1。如果我点击显示更多关于作者，而不仅仅是显示有关该内容的更多信息，它还会显示有关图书说明的更多信息，以及这本书是谁对即可。我不希望它这样做，我只是想让它向我展示更多关于该特定信息的信息。

2。它也没有显示我或给我 less 链接选项。

这是我的HTML和JavaScript代码。

＆＃13;

$(document).ready(function() {
    
    $("#jdom").click(function() {
        $("a").toggle(function () {
            $(this).text("").siblings("div").hide();
        }, function() {
            $(this).text("Less").siblings("div").show();
        });
    });
    
});

＆＃13;

article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
}
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 87.5%;
	width: 650px;
	margin: 0 auto;
	border: 3px solid blue;
}
section {
	padding: 15px 25px;
}
h1 { 
	font-size: 150%;
}
h2 {
	font-size: 120%;
	padding: .25em 0 .25em 25px;
}
div.hide {
	display: none;
}
ul {
	padding-left: 45px;
}
li {
	padding-bottom: .4em;
}
p, a {
	padding-bottom: .4em;
	padding-left: 25px;
}

＆＃13;

<!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">
            <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="#">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.</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="#">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>

＆＃13;

我不知道自己做错了什么。

Answer 1

试试这个，

    $(document).ready(function() {
      $(document).on('click','a',function(e){
         $(this).text( ($(this).text()  == "Show more") ? "Less":"Show more" ) ;
         $(document).find($(this).attr('data-target')).toggle();

         /*OR WITH ANIMATION*/
         /*
         if($(this).text()  == "Show more"){
            $(this).text("Less");
            $(document).find($(this).attr('data-target')).slideDown(300);
         }else{
            $(this).text("Show more");
            $(document).find($(this).attr('data-target')).slideUp(300);
         }*/
      });



    /*MORE ACTION*//*
     $(document).on('click','#jdom',function(e){
             $(document).find('a').each(function(){
                     $(this).trigger('click');
             })
          });
    */
    });

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>

Answer 2

我已经修改了一些HTML，以及JS。尝试使用这样，它可能会给你解决方案。

config/initializer/devise.rb

$(document).ready(function() {
	
	$("a").click(function(e) {
		e.preventDefault();
		var moreSection = $(this).parents(".section").find(".more-section");
        if($(this).text() == "Show more" && moreSection.hasClass("hide")){
			$(this).text("Show less");
			moreSection.removeClass("hide").addClass("show");
		}else{
			$(this).text("Show more")
			moreSection.addClass("hide").removeClass("show");
		}
    });
	
});

article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
}
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 87.5%;
	width: 650px;
	margin: 0 auto;
	border: 3px solid blue;
}
section {
	padding: 15px 25px;
}
h1 { 
	font-size: 150%;
}
h2 {
	font-size: 120%;
	padding: .25em 0 .25em 25px;
}
div.hide {
	display: none;
}
div.show {
	display: block;
}
ul {
	padding-left: 45px;
}
li {
	padding-bottom: .4em;
}
p, a {
	padding-bottom: .4em;
	padding-left: 25px;
}

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

2 个答案: