Html 如何使用jquery创建动态下拉表单

我在一个Django项目上工作，我正在尝试在按钮点击时实现一个下拉表单。当我点击一个按钮时，我有一个下拉表单，每个表单都有自己的按钮，问题是当我点击一个特定的表单按钮时，所有其他表单也会下拉。我只想让特定的表单下拉，而其他表单则不想。我认为这与将表单id传递给每个单击的按钮有关。这就是我试过的

模板：

{% for comment in all_comments %}
<ul>
<li class="float-right">
<!--Dropdown-->
<div class="dropdown dropdown-commentdeleteedit">
<a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h grey-text"></i>
</a>
<!-- Menu -->
<div class="dropdown-menu font-small z-depth-1">
<a class="dropdown-item material-tooltip-email editform-dropdown" data-toggle="tooltip" data-placement="top" title="Edit">
<img src="{{ '/static/' }}images/edit24px.png" width="18" height="18"></a>
</div>
</div>
<!--Dropdown-->
</li>
{% endif %}
<h6 class="comment editcomment-text ml-5">
{{ comment.comment_post }}
</h6>

<!-- DROPDOWN EDIT COMMENT FORM -->
<form  method="POST" enctype="multipart/form-data" class="ajaxcomment-editform editcommentform editcomment-form mb-4" id="" action="{% url 'site:comment_update' post.id comment.id %}">
{% csrf_token %}
<textarea name="comment_post" cols="20" rows="5" required="" id="id_comment_post{{ comment.id }}">{{ comment.comment_post }}</textarea>
<button type="submit" class="btn btn-sm waves-effect z-depth-1">Save</button>
</form>
</ul>
{% endfor %}

{%用于所有注释中的注释%}



{%endif%}
{{comment.comment_post}
{%csrf_令牌%}
{{comment.comment_post}
拯救

{%endfor%}

Jquery：

<script type="text/javascript">
//HIDE AND SHOW COMMENT EDIT FORM ON DROPDOWN
$(document).on('click', '.editform-dropdown', function(){
 $('.editcommentform').show();
 $('.editcomment-text').hide();
})
</script>

//在下拉列表中隐藏和显示注释编辑表单
$（document）.on（'click'，'editform下拉列表'，function（）{
$（'.editcommentform'）.show（）；
$（'.editcomment text'）.hide（）；
})

它正在打开所有下拉列表，因为

$（'.editcommentform'）

使用类

editcommentform

选择DOM中的所有元素。范围太广了

您需要向处理程序函数添加一个事件参数，然后在函数中引用

event.target

，以访问单击的实际对象。然后，您可以访问要显示和隐藏的确切

.editcommentform

和

.editCommentText

元素

像这样的方法应该会奏效：

<script type="text/javascript">
//HIDE AND SHOW COMMENT EDIT FORM ON DROPDOWN
$(document).on('click', '.editform-dropdown', function(event){
  $(event.target).closest('li').find('.editcommentform').show();
  $(event.target).closest('li').find('.editcomment-text').hide();
})
</script>

//在下拉列表中隐藏和显示注释编辑表单
$（文档）.on（'click'，'.editform下拉列表'，函数（事件）{
$（event.target）.closest（'li'）.find（'.editcommentform'）.show（）；
$（event.target）.closest（'li'）.find（'.editcomment text'）.hide（）；
})

调用

$（event.target）。最近（'li'）

选择与单击对象最近的父

li

元素，然后调用

find（'classname'）

选择父类的子类

editcommentform

---

这里有一个基于你的代码的小提琴，展示了它是如何工作的：

@Benjamin…我用你的代码替换了我的代码，当我点击编辑按钮无表单下拉列表当我点击按钮无表单下拉列表发布你页面的实际html输出时，我可以帮助你更多。我使用你的答案作为我模板的jquery。我已经发布了我的模板。当我点击编辑按钮“无表单”下拉列表时，我在控制台中并没有得到任何输出。