1

以下にjqueryコードを追加しています.+リンクをクリックすると、1つのテキストボックスがスライドダウンして正常に機能するはずです.しかし、もう一度+をクリックするたびに同じ効果が欲しい. Jquery

$(".more_button").click(function(){
    $("#topping_more").slideDown();
    });
**Html Code**

<div class="display_none" id="topping_more">
  <p>
      <label></label>
       <input type="text" name="topping"  maxlength="50" class="validate[required]" value="<?php //echo set_value('topping',$this->form_data->topping);?>"/>
      <span><strong>price</strong></span>
       <input style="width:80px;" type="text" name="price"  maxlength="50" class="validate[required]" value="<?php //echo set_value('menu_item',$this->form_data->menu_item);?>"/>
  </p>
</div>
 <p>
     <a style="margin-left:650px;"  id="add_more" class="more_button fl"> + </a>
 </p>

私は同じこの種の効果が欲しいhttp://jsfiddle.net/7yU3n/ ...しかし、もう一度追加をクリックすると、同じ追加が前の追加の下にあるはずです

4

3 に答える 3

1

p タグを複製して、以下のように div に追加することもできます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".more_button").click(function(e)
        {
            e.preventDefault();
            $("#topping_more").slideDown();
            var clone = $("#topping_more p:first").clone();
            $("#topping_more").append(clone);

            //also do below
            var clone = $("#topping_more p:first").clone();
            clone.appendTo("#topping_more").slideDown('slow');
            //also above will work
        });
    });
</script>

<div class="display_none" id="topping_more" style="display:none;">
  <p>
      <label></label>
       <input type="text" name="topping"  maxlength="50" class="validate[required]" value="<?php //echo set_value('topping',$this->form_data->topping);?>"/>
      <span><strong>price</strong></span>
       <input style="width:80px;" type="text" name="price"  maxlength="50" class="validate[required]" value="<?php //echo set_value('menu_item',$this->form_data->menu_item);?>"/>
  </p>
</div>
<p>
    <a style="margin-left:650px;"  id="add_more" class="more_button fl" href="#"> ADD </a>
</p>

あなたのコメントに応じて、pタグスタイルの表示なしとappendTo divを指定して下にスライドさせると、最初のクリック時に2つのpが表示されなくなります。

于 2013-01-04T07:59:21.290 に答える