如何在JavaScript中切换按钮并更改文本？

时间：2017-01-31 07:45:04

标签： javascript jquery html css

我想隐藏并显示div中的溢出内容。如果我点击展开bautton它会展开。但我希望这个按钮应该切换，文本也可以改变。 Thnks

＆＃13;
＆＃13; 
if let prefs = NSUserDefaults(suiteName: suiteName) {

            if let galleryBucket = prefs.objectForKey(keyName) as? [NSURL:NSData] {

                for imageData in galleryBucket{

                    drawCard(imageData.1)
                }
            }
        }
＆＃13; 
   function descriptionHeightMore(){
          var myElement = document.querySelector(".backwhite");
        myElement.style.height = "auto";
        }
＆＃13; 
 .backwhite{
        background-color: aqua;
        padding:15px;
        height:50px;
        overflow:hidden;
      }
＆＃13;
＆＃13;
＆＃13;

8 个答案:

答案 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>

  1. 使用.toggleClass()
  2. 有一个预定义的溢出类。
  3. 相应地切换

答案 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>

＆＃13;
＆＃13; 
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";
}
＆＃13; 
.backwhite {
  background-color: aqua;
  padding: 15px;
  height: 50px;
  overflow: hidden;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 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);
    }
});
相关问题
最新问题