1

我在下面附加了我的 jquery 代码。当我单击 + 链接时，一个文本框应该向下滑动，工作正常。但我希望每次单击 + 时都具有相同的效果。希望任何人都可以帮助我 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

我不知道你到底想要什么，但这段代码是如果你想在每次点击时上下滑动

$(".more_button").click(function(){

    if($("#topping_more").css('display')=='hide'){    
          $("#topping_more").slideDown();
    }else{
          $("#topping_more").slideUp();
}

    });

此代码用于每次向下滑动....

$(".more_button").click(function(){
$("#topping_more").slideUp();
$("#topping_more").slideDown();
});
于 2013-01-04T07:40:45.257 回答
1

用于clone()克隆输入并将appendTo其添加到块中

HTML

 <div id="displayblock"> //add this block in your html
    <div class="display_none" id="topping_more">
    ....
    </div>
 </div>

查询

$(".more_button").click(function(){
   $("#topping_more").clone().appendTo('#displayblock').slideDown();
});​

这是小提琴

更新

查询

 var clickedcount = 1; 
 $(".more_button").click(function(){            
   $("#topping_more").clone().attr('id','topping_more'+clickedcount).appendTo('#displayblock');

   var newSpan = $('<span>',{
                 class:"close",
                 text:"close"

             });
   newSpan.appendTo($('#topping_more'+clickedcount).find('p'));
   $('#topping_more'+clickedcount).slideDown();
   clickedcount++;
 });

 $('#displayblock').on('click','.close',function(){
    $(this).parent().slideUp('slow',function(){
        $(this).parent().remove();
  });
});

新小提琴在这里

于 2013-01-04T07:57:56.750 回答
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 标签样式 display none 和 appendTo div 并将其向下滑动，然后第一次单击时您将看不到两个 p。

于 2013-01-04T07:59:21.290 回答