blocks|key|4431296|text|您可以创建类.slideup|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4431297|#box.slideUp+{
++++height:0;
}|code-block|syntax|javascript|4431298|并在#box上切换这个类：|4431299|function+toggle(){
++++document.getElementById('box').classList.toggle('slideUp')
}|4431300|示例here|4431301|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/frontendguy/pen/dMyzeN^0|6|8|0|0|0|0|2|4|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|Q|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>You can create class <code>.slideup</code> </p>

<pre><code>#box.slideUp {
    height:0;
}
</code></pre>

<p>And toggle this class on #box:</p>

<pre><code>function toggle(){
    document.getElementById('box').classList.toggle('slideUp')
}
</code></pre>

<p>Example <a href="http://codepen.io/frontendguy/pen/dMyzeN" rel="nofollow">here</a></p>


blocks|key|4431364|text|将css属性放入一个类中，将该类添加到元素中，然后使用classList.toggle()切换影响元素高度开/关的类|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4431365|​|4431366|function+slideToggle(el)+{
++var+elem+=+document.getElementById(el);
++elem.classList.toggle("open");
}|code-block|syntax|javascript|4431367|body{
++background:grey;
}

#box{
++width:400px;
++background:orange;
++margin:0+auto;
++margin-top:3%25;
++overflow:hidden;
}

.slider+{
++++transition:all+2s+ease-in-out;
++++height:0px;
}
.slider.open+{
++++height:400px;
}|4431368|<div+id+=+"box"+class="slider">Show+/+Hide</div>
<button+onclick="slideToggle('box');">Slide</button>|4431369|4431370|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/classList^0|R|I|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|M|3|N|5|H|7|14|8|@]|9|@]|C|$I|J]]|$1|O|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>Put the css properties into a class, add the class to your element, and then toggle the class that affect the height on/off of the element using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList" rel="nofollow">classList.toggle()</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function slideToggle(el) {
  var elem = document.getElementById(el);
  elem.classList.toggle("open");
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{
  background:grey;
}

#box{
  width:400px;
  background:orange;
  margin:0 auto;
  margin-top:3%;
  overflow:hidden;
}

.slider {
    transition:all 2s ease-in-out;
    height:0px;
}
.slider.open {
    height:400px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id = "box" class="slider"&gt;Show / Hide&lt;/div&gt;
&lt;button onclick="slideToggle('box');"&gt;Slide&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4431742|text|我喜欢用一个简单的布尔值来跟踪状态，有点像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4431743|var+_bool+=+false;
var+_box+=+document.getElementById('box');
var+_clik+=+document.getElementById('clik');

_clik.addEventListener('click',+function(){
++if+(_bool){
++++++_box.style.height+=+'100px';
++++++_bool+=+false;
+++}+else+{
++++++_box.style.height+=+'10px';
++++++_bool+=+true;
+++}

});|code-block|syntax|javascript|4431744|Here's+a+Fiddle|offset|length|4431745|重要的是，我们没有在DOM上存储状态，所以一旦你的应用变得复杂，它就会保持性能。显然，你可以以任何你喜欢的方式使用这两种状态(动画、css过渡等)；|4431746|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/mwvjb66z/^0|0|0|0|F|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I like to track state with a simple boolean, a bit like so :</p>

<pre><code>var _bool = false;
var _box = document.getElementById('box');
var _clik = document.getElementById('clik');

_clik.addEventListener('click', function(){
  if (_bool){
      _box.style.height = '100px';
      _bool = false;
   } else {
      _box.style.height = '10px';
      _bool = true;
   }

});
</code></pre>

<p><a href="https://jsfiddle.net/mwvjb66z/" rel="nofollow">Here's a Fiddle</a></p>

<p>Importantly, we're not storing state on the DOM, and so once your app gets complicated, it will stay performant. You, obviously, can use these two states in whatever way you like (animation, css transition, etc);</p>


blocks|key|4431497|text|通过css样式表将过渡应用到#box；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4431498|+#box+{
++-webkit-transition:+all+2s+ease-in-out;
++-ms-transition:+all+2s+ease-in-out;
++transition:+all+2s+ease-in-out;
++width:400px;
++height:400px;
++background:orange;
++margin:0+auto;
++margin-top:3%25;
++overflow:hidden;
}|code-block|syntax|javascript|4431499|今天我想更多地熟悉模块，所以这是一种模块化的方法--解决方案|4431500|++var+Dropdown+=+function(el)+{

++++++var+is_open+=+false;
++++++var+elem+=+document.querySelector(el);++
++++++//+in+case+you+cannot+set+transition+via+stylesheet+
++++++elem.style.transition+=+"all+2s+ease-in-out";

++++++function+slideUp()+{
++++++++elem.style.height+=+"0px";+++++
++++++++is_open+=+false;
++++++}
++++++function+slideDown()+{
++++++++elem.style.height+=+"400px";
++++++++is_open+=+true;
++++++}
++++++function+init()+{
++++++++if(is_open)+{
++++++++++slideUp();
++++++++}else{
++++++++++slideDown();
++++++++}
++++++}
++++++return+{
++++++++init+:+init
++++++}
++};

++myDropdown+=+Dropdown('#box');
++document.querySelector('#your-button').addEventListener('click',++myDropdown.init);|4431501|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Apply transition to  #box via css stylesheet;</p>

<pre><code> #box {
  -webkit-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  width:400px;
  height:400px;
  background:orange;
  margin:0 auto;
  margin-top:3%;
  overflow:hidden;
}
</code></pre>

<p>I am trying to get more familiar with modules today, so this is a modular approach - solution</p>

<pre><code>  var Dropdown = function(el) {

      var is_open = false;
      var elem = document.querySelector(el);  
      // in case you cannot set transition via stylesheet 
      elem.style.transition = "all 2s ease-in-out";

      function slideUp() {
        elem.style.height = "0px";     
        is_open = false;
      }
      function slideDown() {
        elem.style.height = "400px";
        is_open = true;
      }
      function init() {
        if(is_open) {
          slideUp();
        }else{
          slideDown();
        }
      }
      return {
        init : init
      }
  };

  myDropdown = Dropdown('#box');
  document.querySelector('#your-button').addEventListener('click',  myDropdown.init);
</code></pre>


<p>I am having trouble of solving a problem. I have 2 buttons, the one is for slideUp and the other is for slideDown. What i would like to do is to have one button that toggle instead of having 2.</p>

<p>Thanks. </p>

<p>I have this code in html:</p>

<pre><code>&lt;div id = "box"&gt;Show / Hide&lt;/div&gt;
  &lt;button onclick="slideUp('box');"&gt;Slide Up&lt;/button&gt;
  &lt;button onclick="slideDown('box');"&gt;Slide Down&lt;/button&gt;
</code></pre>

<p>and i have this code in css:</p>

<pre><code>body{
  background:grey;
}

#box{
  width:400px;
  height:400px;
  background:orange;
  margin:0 auto;
  margin-top:3%;
  overflow:hidden;
}
</code></pre>

<p>and my javascript code is this:</p>

<pre><code>function slideUp(el) {
  var elem = document.getElementById(el);
  elem.style.transition = "all 2s ease-in-out";
  elem.style.height = "0px";
}
function slideDown(el) {
  var elem = document.getElementById(el);
  elem.style.transition = "all 2s ease-in-out";
  elem.style.height = "400px";
}
</code></pre>


Javascript slideUp / slideDown / one button

我在解决一个问题上有困难。我有两个按钮，一个是slideUp的，另一个是slideDown的。我想要做的是有一个按钮来切换，而不是有两个。谢谢。我有一个html格式的代码：<div id = "box">Show / Hide</div>  <button onclick="slideUp('box');">Slide...

问Javascript slideUp / slideDown /一个按钮
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript slideUp / slideDown /一个按钮EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript slideUp / slideDown /一个按钮
EN