Question

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

代码是：

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"});
           }
        });
    });

我哪里出错？

Answer 1

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

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

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

Answer 2

尝试#dynamicInput代替.dynamicInput

切换和高度调整点击

2 个答案: