时间戳

首页 > 解决方案 > 如何缩短此 java 脚本代码长度并添加动画？

javascript - 如何缩短此 java 脚本代码长度并添加动画？

问题描述

嗨！我目前正在学习用于 Web 开发的 java-script。不知何故，我相信我使用的这段代码是一条很长的路，应该有更短的方法来做到这一点。它是点击时的下拉和可伸缩菜单（内容）。有没有更好的方法可以做到这一点，而不是编写所有这些代码？

另外，我如何向菜单添加过渡

? 我希望它弹出并慢一点。提前致谢！

function droping(){
                let dropdown = document.getElementById('dropdown');
                let dropped = dropdown.style.display;
                let cross = document.getElementById('cross1');
                let plus = cross.style.display;
                let dash = document.getElementById('minus1');
                let minus = dash.style.display;
            if(dropped == 'none'){
                dropdown.style.display = 'block';
                cross.style.display = 'none';
                dash.style.display = "inline-block";
            }
            else {
                dropdown.style.display = 'none';
                cross.style.display = 'inline-block';
                dash.style.display = "none";
            }

        }
button {
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    text-decoration: none;
    background-color: transparent;
    border: none;
    padding: 1.3rem;
}

button:visited {
    background-color: teal;
    border: none;
}

.cross i{
    margin-left: auto;
    margin-right: 0.3rem;
}

.move {
    transition: ease-in-out 0.6s;
}
<button class="maintop cross" onclick="droping()">
                What did the lion say to the king? 
                <i class="fa fa-plus" style="display: inline-block;" id="cross1" class=""></i>
                <i class="fa fa-minus" style="display: none;" id="minus1" class=""></i>
            </button>
        <div id="dropdown" style="display: none;">
            <p> We can have another meal of your body!</p>
        </div>

标签： javascripthtml

解决方案

对于显示/隐藏元素，最简单的方法是使用内置hiddenAPI：

function droping() {
  const dropdown = document.getElementById('dropdown');
  const cross = document.getElementById('cross1');
  const dash = document.getElementById('minus1');
  dropdown.hidden = !dropdown.hidden;
  cross.hidden = !cross.hidden;
  dash.hidden = !dash.hidden;
}
button {
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  text-decoration: none;
  background-color: transparent;
  border: none;
  padding: 1.3rem;
}

.cross i {
  margin-left: 3em;
}

[hidden] { display: none !important; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="maintop cross" onclick="droping()">
    What did the lion say to the king? 
    <i class="fa fa-plus" id="cross1"></i>
    <i class="fa fa-minus" id="minus1" hidden></i>
</button>
<div id="dropdown" hidden>
  <p> We can have another meal of your body!</p>
</div>

您的解决方案和这个解决方案都取决于使用该display属性显示/隐藏。可惜display不能动画。

如果你需要转换，我建议你要么根据你自己的 CSS 类来实现它，然后添加/删除而不是更改display属性，或者简单地使用jQuery.toggle()：

function droping() {
  $('#dropdown, #cross1, #minus1').toggle('slow');
}
button {
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  text-decoration: none;
  background-color: transparent;
  border: none;
  padding: 1.3rem;
}

.cross i {
  margin-left: 3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="maintop cross" onclick="droping()">
    What did the lion say to the king? 
    <i class="fa fa-plus" id="cross1"></i>
    <i class="fa fa-minus" id="minus1" style="display: none"></i>
</button>
<div id="dropdown" style="display: none">
  <p> We can have another meal of your body!</p>
</div>

推荐阅读