使用jQuery扩展或折叠文本

时间：2017-04-21 05:07:25

标签： javascript jquery html css

我正在尝试学习如何使用jQuery来扩展/折叠网页上的文字，但我不确定如何使用＆＃34; a href＆＃34;链接？我希望用户通过点击＆＃34;显示更多＆＃34;来扩展或折叠文字。链接。我知道你必须添加或删除隐藏＆＃39;要做到这一点的类，但我究竟会如何使用toggle类来实现这一目标呢？

＆＃13;
＆＃13; 
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 87.5%;
  width: 650px;
  margin: 0 auto;
  padding: 15px 25px;	
  border: 3px solid blue;
}
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;
}
a, a:focus, a:hover {
  color: blue;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="main.css">
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="subset_expansion.js"></script>   	
</head>

<body>
  <main id="jdom">
    <h1>Expanding and Collapsing messages</h1>
    <h2>Message 1</h2>
    <div>
        <p>Click the link below to expand this message</p>
    </div>
    <div class="hide">
        <p>Hello!</p>
    </div>
    <a href="#">Show more</a>			

    <h2>Message 2</h2>
    <div>
        <p>Click the link below to expand this message</p>
    </div>
    <div class="hide">
      <p>BOOP</p>
    </div>
    <a href="#">Show more</a>

    <h2>Message 3</h2>
    <div>
        <p>Click the link below to expance this message</p>
    </div>
    <div class="hide"> 
      <p>Things to do when you're bored</p>
      <ul>
        <li>Go for a walk</li> 
        <li>Try your hand at painting.</li>
        <li>Listen to music</li>
      </ul>
    </div>
    <a href="#">Show more</a>	
  </main>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：0)

尝试下面的代码段。调整您的要求。我添加了data-show属性标记，然后在onclick中调用了一个函数并将数据传递给切换。

＆＃13;
＆＃13; 
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 87.5%;
  width: 650px;
  margin: 0 auto;
  padding: 15px 25px;	
  border: 3px solid blue;
}
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;
}
a, a:focus, a:hover {
  color: blue;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="main.css">
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="subset_expansion.js"></script>   	
</head>

<body>
  <main id="jdom">
    <h1>Expanding and Collapsing messages</h1>
    <h2>Message 1</h2>
    <div>
      <p>Click the link below to expand this message</p>
    </div>
    <div class="hide" data-show="link">
      <p>Hello!</p>
    </div>
    <a href="#" onclick='$("[data-show=link]").toggle()'>Show more</a>			

    <h2>Message 2</h2>
    <div>
      <p>Click the link below to expand this message</p>
    </div>
    <div class="hide">
      <p>BOOP</p>
    </div>
    <a href="#">Show more</a>

    <h2>Message 3</h2>
    <div>
      <p>Click the link below to expance this message</p>
    </div>
    <div class="hide"> 
      <p>Things to do when you're bored</p>
      <ul>
        <li>Go for a walk</li> 
        <li>Try your hand at painting.</li>
        <li>Listen to music</li>
      </ul>
    </div>
    <a href="#">Show more</a>				

  </main>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

在链接上添加iquery，并在show-more之类的链接中添加类，并使用父div包装消息div，就像我msg-wrap

一样

＆＃13;
＆＃13; 
$(document).ready(function(){
  $('.show-more').click(function(){   
    $(this).parents('.msg-wrap').find('.hide').slideToggle();
  })
});
＆＃13; 
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 87.5%;
  width: 650px;
  margin: 0 auto;
  padding: 15px 25px;	
  border: 3px solid blue;
}
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;
}
a, a:focus, a:hover {
  color: blue;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="main.css">
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="subset_expansion.js"></script>   	
</head>

<body>
  <main id="jdom">
    <h1>Expanding and Collapsing messages</h1>
    <div class="msg-wrap">
      <h2>Message 1</h2>
      <div>
          <p>Click the link below to expand this message</p>
      </div>
      <div class="hide">
          <p>Hello!</p>
      </div>
      <a href="#" class="show-more">Show more</a>
    </div>
    <div class="msg-wrap">
      <h2>Message 2</h2>
      <div>
          <p>Click the link below to expand this message</p>
      </div>
      <div class="hide">
        <p>BOOP</p>
      </div>
      <a href="#" class="show-more">Show more</a>
    </div>
    <div class="msg-wrap">
      <h2>Message 3</h2>
      <div>
          <p>Click the link below to expance this message</p>
      </div>
      <div class="hide"> 
        <p>Things to do when you're bored</p>
        <ul>
          <li>Go for a walk</li> 
          <li>Try your hand at painting.</li>
          <li>Listen to music</li>
        </ul>
      </div>
      <a href="#" class="show-more">Show more</a>
     </div>
  </main>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

＆＃13;
＆＃13; 
$(document).ready(function(){

  $('a').on( "click", function(){
    $(this).prev("div").toggleClass('hide');
    if($(this).text() == 'Show more')
    {
       $(this).text('Show Less');
    }
    else
    {
       $(this).text('Show more');
    }
  });
});
＆＃13; 
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 87.5%;
	width: 650px;
	margin: 0 auto;
	padding: 15px 25px;	
	border: 3px solid blue;
}
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;
}
a, a:focus, a:hover {
	color: blue;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>Title</title>
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>   	
</head>

<body>
	<main id="jdom">
		<h1>Expanding and Collapsing messages</h1>
		<h2>Message 1</h2>
		<div>
            <p>Click the link below to expand this message</p>
        </div>
        <div class="hide">
            <p>Hello!</p>
		</div>
		<a href="javasctipt:void();">Show more</a>			
		
		<h2>Message 2</h2>
		<div>
            <p>Click the link below to expand this message</p>
        </div>
        <div class="hide">
			<p>BOOP</p>
		</div>
		<a href="javasctipt:void();">Show more</a>
			
		<h2>Message 3</h2>
		<div>
            <p>Click the link below to expance this message</p>
		</div>
		<div class="hide"> 
			<p>Things to do when you're bored</p>
			<ul>
				<li>Go for a walk</li> 
				<li>Try your hand at painting.</li>
				<li>Listen to music</li>
			</ul>
		</div>
		<a href="javasctipt:void();">Show more</a>				
	
	</main>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

＆＃13;
＆＃13; 
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 87.5%;
	width: 650px;
	margin: 0 auto;
	padding: 15px 25px;	
	border: 3px solid blue;
}
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;
}
a, a:focus, a:hover {
	color: blue;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>Title</title>
	<link rel="stylesheet" href="main.css">
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
   	<script src="subset_expansion.js"></script>   	
</head>

<body>
	<main id="jdom">
		<h1>Expanding and Collapsing messages</h1>
		<h2>Message 1</h2>
		<div>
            <p>Click the link below to expand this message</p>
        </div>
        <div class="hide">
            <p>Hello!</p>
		</div>
		<a href="#" class="show_more">Show more</a>			
		
		<h2>Message 2</h2>
		<div>
            <p>Click the link below to expand this message</p>
        </div>
        <div class="hide">
			<p>BOOP</p>
		</div>
		<a href="#" class="show_more">Show more</a>
			
		<h2>Message 3</h2>
		<div>
            <p>Click the link below to expance this message</p>
		</div>
		<div class="hide"> 
			<p>Things to do when you're bored</p>
			<ul>
				<li>Go for a walk</li> 
				<li>Try your hand at painting.</li>
				<li>Listen to music</li>
			</ul>
		</div>
		<a href="#" class="show_more">Show more</a>				
	
	</main>

<script>

$(document).ready(function(){
  $(document).on("click",".show_more",function(){
  $(this).prev().toggle();
  $(this).text(function(i, text){
      return text === "Show more" ? "Show Less" : "Show more";
  })
});

});
</script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

$（＆＃34; a.show-更＆＃34）。在（＆＃34;单击＆＃34;，函数（）{

    $(this).text(function(i, v){
   return v === 'Show More' ? 'Show Less' : 'Show More'
});

}）;

相关问题
最新问题