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>的高度，以顯示所有文本。

希望這可以幫助。