点击时切换和高度调整

Toggle and height adjust onclick

本文关键字：高度 调整      更新时间：2023-09-26

我正在尝试单击一个按钮，该按钮使按钮所在的容器的大小在单击按钮后变高。但它不起作用

代码为：

.HTML 

  <div id="dynamicInput" class="dynamicInput">
    <form name="new_addon" id="new_addon" method="post">
     <input type="text" id="Product_name" name="Product_name" value="" placeholder="Product Name">
     <input type="number" id="addon_price" name="addon_price" value="" placeholder="Additional Costs" maxlength="30" required>
     <!--Add add-ons to product button -->
     <input type="button" id="add_prod" name="add_prod" value="Add Option " >
     <input type="button" id="new" value="Add another text input" onClick="addInput('dynamicInput');">
    </form> 
  </div>

.JS

   $(document).ready(function (){
      $("#add_prod").on("click", function (){
        if ($(".dynamicInput").height() == 200) {
           $(".dynamicInput").animate(
               {height: "300px"});
           }
        else if ($(".dynamicInput").height() == 300) {
           $(".dynamicInput").animate({height: "200px"});
           }
        });
    });

我哪里做错了？

这是

工作，你应该在你的div中position:absolute

 <div id="dynamicInput" class="dynamicInput" style="position:absolute;height:200px;background-color:red;" >

结果 ： https://jsfiddle.net/cmedina/c9vsgauu/

尝试#dynamicInput .dynamicInput

相关文章：