在一个站点上使用两个fadeToggle

时间:2017-04-26 11:54:59

标签: javascript jquery

我想在同一网站上的两个分隔的div上使用mainLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { int heightDiff = mainLayout.getRootView().getHeight() - mainLayout.getHeight(); if (heightDiff > 100) { Utils.appLogger("MyActivity", "keyboard opened"); creditsView.setVisibility(View.GONE); } if (heightDiff < 100) { Utils.appLogger("MyActivity", "keyboard closed"); creditsView.setVisibility(View.VISIBLE); } } }); ,但只有一个可以使用。我可以停用一个,然后另一个运行,但不能同时运行。 因此,如果用户点击fadeToggle,则应显示评论输入字段,如果他点击comment-reply-btn则评论应显示。 我在标题中有这个:

show-subcom-btn

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

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

如果它不适用于FadeToggle你还会推荐什么来实现这种效果? 我没有在这里或谷歌上找到任何东西。我发现的唯一的东西就像“在FadeToogles上显示两个”或“当另一个人隐藏时显示一个”等等。所以如果这个问题已经回答,请发给我链接。谢谢你的建议

2 个答案:

答案 0 :(得分:0)

如果两个按钮都放在&#34; show-subcom&#34;的顶部。然后它是dom元素选择的问题。

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

你需要欺骗上线,我猜是

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

我的个人意见不是父/下,而是在选择元素时将id添加到父和该id的目标 示例:

plots <- list()
for (i in 1:2){
  p1 <- ggplot(dataset,aes_string(x=names(dataset)[1], y=names(dataset)[i+1])) + geom_point()
  plots[[i]] <- p1
}

multiplot(plotlist = plots, cols=2)

答案 1 :(得分:0)

{% 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>