我想隐藏并显示div中的溢出内容。如果我点击展开bautton它会展开。但我希望这个按钮应该切换，文本也可以改变。 Thnks
if let prefs = NSUserDefaults(suiteName: suiteName) {
if let galleryBucket = prefs.objectForKey(keyName) as? [NSURL:NSData] {
for imageData in galleryBucket{
drawCard(imageData.1)
}
}
}
function descriptionHeightMore(){
var myElement = document.querySelector(".backwhite");
myElement.style.height = "auto";
} .backwhite{
background-color: aqua;
padding:15px;
height:50px;
overflow:hidden;
}
答案 0 :(得分：1)
使用javascript试试这个，首先检查身高，然后决定：
function descriptionHeightMore(){
var myElement = document.querySelector(".backwhite");
if(myElement.style.height == "auto"){
myElement.style.height = "50px";
}else{
myElement.style.height = "auto";
}
} .backwhite{
background-color: aqua;
padding:15px;
height:50px;
overflow:hidden;
}<div class="container">
<div class="backwhite">
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
</div>
<button type="button" class="btn btn-default btn-block" onclick="descriptionHeightMore();">Toggle</button>
</div>
答案 1 :(得分：1)
这是一个使用纯JavaScript的解决方案
首先，您应该创建一个名为.expanded的新类，我们可以打开和关闭它们 -
.backwhite.expanded {
height: auto;
}
接下来，我修改了JavaScript来切换.expanded类，以及按钮的内容 -
function toggleDescriptionHeight(e) {
// Toggle .expanded class
document.querySelector(".backwhite").classList.toggle('expanded');
// Toggle textContent of the button
e.target.textContent == 'Expand' ? e.target.textContent = 'Collapse' : e.target.textContent = 'Expand';
}
// Add event listener to button click
var button = document.querySelector('.btn');
button.addEventListener('click', toggleDescriptionHeight)
链接到CodePen上的工作示例 - http://codepen.io/ire/pen/wgyvYw
答案 2 :(得分：1)
要通过javascript获取元素的高度是不可能的。你有更改高度的按钮，因此检查其按钮文本很容易使切换更改。
function descriptionHeightMore(t){
var myElement = document.querySelector(".backwhite");
if(t.innerHTML == "Expand") {
myElement.style.height = "auto";
t.innerHTML = "Collapse";
}
else {
myElement.style.height = "50px";
t.innerHTML = "Expand";
}
}.backwhite{
background-color: aqua;
padding:15px;
height:50px;
overflow:hidden;
}<div class="container">
<div class="backwhite">
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
</div>
<button type="button" class="btn btn-default btn-block" onclick="descriptionHeightMore(this);">Expand</button>
</div>
答案 3 :(得分：0)
因为你在jQuery中标记了问题， 您可以使用jQuery的toggleClass函数轻松实现此目的
工作示例https://jsfiddle.net/yyx93shy/
<script>
function descriptionHeightMore(){
var myElement = document.querySelector(".backwhite");
$(myElement).toggleClass("autoHeight");
}
</script>
CSS
.autoHeight {
height: auto;
}
答案 4 :(得分：0)
$(".btn").click(function() {
$(".backwhite").toggleClass("overflow")
$(".backwhite").hasClass("overflow") ? $(".btn").text("Expand") : $(".btn").text("Compress")
}).backwhite {
background-color: aqua;
padding: 15px;
height: 50px;
}
.overflow {
overflow: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="backwhite overflow">
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
</div>
<button type="button" class="btn btn-default btn-block">Expand</button>
</div>
.toggleClass() 答案 5 :(得分：0)
试试这段代码。只需单击一下按钮，它就会改变溢出和按钮值。 祝你好运
<html>
<head>
</head>
<body>
<script>
function descriptionHeightMore() {
var myElement = document.querySelector(".backwhite");
myElement.style.height = "auto";
if (myElement.style.overflow == "hidden")
myElement.style.overflow = "visible";
else
myElement.style.overflow = "hidden";
var myButton = document.getElementsByTagName("button");
if (myButton.value == "expand")
myButton.value = "collapse";
else
myButton.value = "expand";
}
</script>
<style>
.backwhite {
background-color: aqua;
padding: 15px;
height: 50px;
overflow: hidden;
}
</style>
<div class="container">
<div class="backwhite">
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
</div>
<button type="button" class="btn btn-default btn-block" onclick="descriptionHeightMore();">Expand</button>
</div>
</body>
</html>
function descriptionHeightMore() {
var myElement = document.querySelector(".backwhite");
myElement.style.height = "auto";
if (myElement.style.overflow == "hidden")
myElement.style.overflow = "visible";
else
myElement.style.overflow = "hidden";
var myButton = document.getElementsByTagName("button");
if (myButton.value == "expand")
myButton.value = "collapse";
else
myButton.value = "expand";
}.backwhite {
background-color: aqua;
padding: 15px;
height: 50px;
overflow: hidden;
}<div class="container">
<div class="backwhite">
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
</div>
<button type="button" class="btn btn-default btn-block" onclick="descriptionHeightMore();">Expand</button>
</div>
答案 6 :(得分：0)
检查出来的人
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.backwhite{
background-color: aqua;
padding:15px;
height:50px;
overflow:hidden;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1 /jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var myElement = document.querySelector(".backwhite");
if(myElement.style.height == "auto"){
myElement.style.height = "50px";
}else{
myElement.style.height = "auto";
}
});
});
</script>
</head>
<body>
<div class="backwhite">
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
</div>
<button type="button">Toggle</button>
</body>
</html>
答案 7 :(得分：-1)
使用jquery方法切换 例如：
db.floorplan_backup.find().forEach(function (doc1) {
var doc2 = db.floorplan.findOne({ userid: doc1.userid }, { firstviewhost: 1 });
if (doc2 != null) {
doc1.firstviewhost = doc2.firstviewhost;
db.floorplan_backup.save(doc1);
}
});