如何缩短此 java 脚本代码长度并添加 animation？

Question

Hy. i am currently learning java-script to utilize in web development. Somehow i believe this snippet o code i used is the long route and there should be a shorter way to do it. it is a drop & retractable menu(content) on click? Is there any better way i could have done this rather than writing all those codes?

Also, how do i add transition to the menu

? I wish for it to pop out and in slower. Thanks in advance!

 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>

Answer 1

For showing/hiding elements, the simplest way is to make use of the build-in hidden API:

 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>

Both your solution and this one depend on showing/hiding using the display property. Unfortunately display cannot be animated.

If you need transitions, I suggest you either implement this based on your own CSS classes which you then add/remove instead of changing the display property, or simply use 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>