jQuery显示更多显示更少而不显示高度

Question

我正在尝试使用200px的指定高度来显示更多/更少显示链接，该链接在单击时显示其余内容。 任何超过200px的东西都将被隐藏，并且会有一个显示更多链接来显示其余文本，我不知道该怎么做，这是指向我的代码Fiddle的链接。

<p>You’re here because you’re concerned about how electromagnetic radiation may be affecting your health.</p>
<p class="h3">You’ve heard that you need to protect yourself!</p>
<p>But from What? EMF? EMC? EMR? EHS? MW? RFR? RF?</p>
<p class="h3">What does it all mean?</p>
<p>EMF stands for ElectroMagnetic Field or Frequency.</p>
<p>Everything God created has its own electromagnetic field.Additionally, everything electronic that man makes has an electromagnetic field as well. It is a measurable type of energy, and for the human body the EMF energy is what powers every cell in our body. <span class="bold">Every living function, whether conscious or subconscious, physical or mental, is powered by low levels of electrical current in our bodies.</span> Have you ever thought about why we use electric shock paddles to restart a heart?</p>
<p>EMC (ElectroMagnetic Chaos) is just a more dramatic way of saying EMF.</p>
<p>EMR (ElectroMagnetic Radiation) is the energy projected from the electromagnetic frequencies.</p>
<p>Just as there are <span class="bold">good fats and bad fats</span> for our body and <span class="bold">good sugars and bad sugars</span> for our body, so there are <span class="bold">good EMFs and bad EMFs</span> for our body.</p>
<p class="h3">So why are some EMFs harmful to our bodies?</p>
<p>God designed the human body with very specific EMF frequencies. Healthy tissue has these strong God-given frequencies. Unhealthy or diseased tissue has weak or unnatural frequencies.</p>
<p>Our healthy EMF frequencies become weak or altered for various reasons, but most commonly by <span class="bold">too much exposure to unnatural EMF frequencies</span> which are out of the realm of our healthy body frequencies.</p>
<p class="h3">Does it really affect us? Is it really killing us?</p>
<p>Electromagnetic Hypersensitivity (EHS), also known as electromagnetic sensitivity and electrohypersensitivity, occurs when the amount of EMF radiation exceeds the body’s ability to deal with it. Once that happens, because of many small EMF exposures or sometimes just one very large exposure, all future exposure can cause a host of health problems, ranging from <span class="bold">headaches, fatigue, depression, allergies, insomnia, asthma, chest pains, erratic heartbeat, high blood pressure, brain fog, ADD/ADHD, digestive disorders & skin disorders to more serious diseases like cancer, alzheimers, parkinsons, fibromyalgia, MS and countless autoimmune & neurological conditions</span>.</p>
<p>The <span class="bold">body was not designed to thrive in the constant presence of all this radiation</span> - electric, magnetic, wireless or ionizing - as many of us are doing today.</p>
<p class="h3">Do the EMF Protection Devices really work?</p>
<p class="bold">The short answer - ABSOLUTELY!</p>
<p>The technology used in all of our EMF Protection Devices is the <span class="bold">same technology that is used to protect computer CPUs</span>. Is EMF real? Well, think about this. Without protection, a computer's CPU would not be able to function due to all the conflicting EMF chaos. <span class="bold">Without this protection computer CPUs would be rendered useless</span>. Computer manufacturers have been using this technology for decades. But it wasn't until recently that <span class="bold">we have begun using that same technology to protect ourselves</span>.</span>

Answer 1

您需要将内容包装在容器元素中，例如DIV：

<div id="wrapped_text">
     // full content here
</div>

然后添加一个新的DIV以使其看起来很漂亮，并添加一个span类来容纳切换文本。 您应该在关闭包装器DIV之前添加此权限，这将使定位工作正常。

<div class="fade_text"></div>
<span class="show_text">Show More</span>
<span class="hide_text">Hide This</span>

现在设置所有样式：

#wrapped_text {
     width: 600px;
     height: 200px;
     position: relative;
}

.fade_text {
     bottom: 0;
     position: absolute;
     width: 600px;
     z-index: 9999;
     background: url('img/fade_text.png') transparent no-repeat;
}

span.show_text {
     overflow: hidden;
     text-decoration: underline;
     position: absolute;
     bottom: 0;
}

span.hide_text {
     overflow: hidden;
     text-decoration: underline;
     display: none;
     position: absolute;
     bottom: 0;
}

现在使用jQuery使一切正常。

$("span.show_text").click(function() {
     $(this).hide();
     $("span.hide_text").show();
     $("div.fade_text").hide();
     $("div#wrapped_text").css("height","auto");
});
$("span.hide_text").click(function() {
     $(this).hide();
     $("span.show_text").show();
     $("div.fade_text").hide();
     $("div#wrapped_text").css("height","auto");
});

那应该行得通，如有任何问题，请随时发表评论。

Answer 2

我建议尝试将所有这些文本包装在一个<div>并利用CSS的overflow属性。

HTML

<div class="info-container">
    <!--Some Info--->
</div>

CSS

.info-container {
    height: 200px;
    overflow: hidden;
}

然后，您应该看一下这个问题，以确定是否存在超出200px的信息。 如果有，则显示一个按钮，并让您的脚本删除<div>的高度，以显示所有文本。

希望这可以帮助。