Javascript 在一个站点上使用两个fadeToggle

我想在同一个站点上的两个分开的div上使用

fadeToggle

，但只有一个可用。我可以停用其中一个，然后另一个运行，但不能同时运行这两个。 因此，如果用户单击

comment reply btn

，则应显示注释输入字段，如果用户单击

show subcom btn

，则应显示注释。 我在标题中有以下内容：

$(".comment-reply-btn").click(function(event){
  event.preventDefault();
  $(this).parent().next(".comment-reply").fadeToggle().delay(1000);
 })

$(".show-subcom-btn").click(function(event){
  event.preventDefault();
  $(this).parent().next(".show-subcom").fadeToggle().delay(1000);
 })

下面是我想为每次点击显示的两个div

<div class="show-subcom hhh2" style="display: none;" >
  {% for child_comment in comment.children %}
  <blockquote>
  <img src="{{ child_comment.user.usersettings.profileimage.url }}" class="childcommentpic">
<a href="/profiles/{{child_comment.user}}">{{child_comment.user}}</a> <span>{{child_comment.timestamp}}</span><br>
  <span>{{child_comment.content }}</span>

  </blockquote>
  {%endfor%}
  </div>

  <div class="comment-reply" style="display: none;">
  <form method="POST" action=".">{%csrf_token%}
    {{comment_form|crispy}}
    <input type="hidden" value="{{ comment.id }}" name="parent_id">
    <input type="submit" value="Reply" class="btn btn-default" name="">
  </form>
</div>

{comment.children%}
{{child_comment.timestamp}}

{{child_comment.content}
{%endfor%}
{%csrf_令牌%}
{{comment|u form | crispy}}

如果它不能与FadeToggle一起使用，您会推荐其他什么方法来实现此效果？

---

我没有在这里或谷歌上找到任何东西。唯一的东西，我发现是像“显示在FadeToogles都在一个”或“显示一个时，另一个是隐藏”等，所以如果这个问题已经回答了，请给我的链接。感谢您的建议

如果两个按钮都放在“show subcom”类的顶部，那么dom元素选择就有问题了

$(this).parent().next(".show-subcom").fadeToggle().delay(1000);

我猜你需要在底线上耍花招

$(this).parent().next().next(".show-subcom").fadeToggle().delay(1000);

我个人的意见是，在选择元素时，不要将id添加到父项和该id的目标，而不要添加到下一个id 例如：

$("#commentsection > .show-subcom").fadeToggle().delay(1000);

{%load staticfiles%}//这是用于静态文件的
评论

{%csrf_令牌%}
{{comment|u form | crispy}}

{注释%中的注释为%}
{{comment.user}
{{comment.content}

在{comment.timestamp | timesince}之前发布
{%if comment.children.count>0%}
{comment.children.count}注释{%if comment.children.count>1%}s{%endif%}|
{%endif%}
{comment.children%}
{{child_comment.user}
{{child_comment.content}

在{comment.timestamp | timesince}之前发布

{%endfor%}
{%csrf_令牌%}
{{comment|u form | crispy}}

{%endfor%}

按钮在哪里？添加一些说明，这将比一段代码有用得多。$（此）。下一步（'.comment reply'）。slideToggle（）；----从父blockquote中使用此代码，并将jquery代码使用到base.html或base.js中，然后将所有jquery代码放入其中$（this）.next（'.comment reply'）.slideToggle（）

{% load staticfiles %} // This is for static files
    <div>
      <p class="loag">Comments</p>
      <form method="POST" action=".">{% csrf_token %}
          {{ comment_form|crispy }}
          <input type="submit" value="Post Comment" class="btn btn-primary">
      </form>
      <hr>

    {% for comment in comments %}
    <blockquote>
        <div class="media">
          <img class="mr-3" src="{% static 'img/comment-icon.svg' %}" alt="Generic placeholder image">
          <div class="media-body">
            <h4 class="mt-0">{{ comment.user}}</h4>
              <p>{{ comment.content }}</p>
              <footer>
                  <small class="text-muted">Posted {{ comment.timestamp|timesince }} ago
                      {% if comment.children.count > 0 %}
                          {{ comment.children.count }} Comment{% if comment.children.count > 1 %}s{% endif %} |
                      {% endif %}

                      <!-- <a class='comment-reply-btn' href=''>Reply</a> -->
                  </small>
              </footer>
                <!-- For child Comment/reply -->
              <blockquote>
            <a class='comment-reply-btn' href='' style='font-size: 13px; text-decoration: none; color: #3333ff;'>Reply</a>
                <div class="comment-reply" style="display: none">
                    {% for child_comment in comment.children %}
                        <div class="media mt-3">
                            <a class="pr-3" href="#">
                                <img src="{% static 'img/comment-icon.svg' %}" alt="Generic placeholder image">
                            </a>
                            <div class="media-body">
                            <h4 class="mt-0">{{ child_comment.user}}</h4>
                                <p>{{ child_comment.content }}</p>
                                <footer>
                                    <small class="text-muted">Posted {{ comment.timestamp|timesince }} ago</small>
                                </footer>
                            </div>
                        </div>
                        <hr>
                    {% endfor %}

                     <form method="POST" action=".">{% csrf_token %}
                         {{ comment_form|crispy }}
                         <!-- <textarea name="content" id="id_content" required="" rows="5" cols="10" class="textarea form-control form-control form-control"></textarea> -->
                         <input type="hidden" name="parent_id" value="{{ comment.id }}">
                         <input type="submit" value="Reply" class="btn btn-primary">
                     </form>
                 <!-- End For child Comment/reply -->
              </div><!-- comment-reply -->
              </blockquote>
             <hr>
            </div>
          </div>
        </blockquote>

    {% endfor %}
    </div>