我想在每次点击时隐藏并显示一个div

时间:2018-08-08 11:57:16

标签: javascript jquery

我想在每次单击时都隐藏并显示一个div,但它只显示并隐藏一次,但在单击按钮时再也不会显示

$(document).ready(function() {

  $(".disp-comment").hide();

  $(".comnt-area-view").click(function() {
    alert("hello");
    $(this).next(".disp-comment").show()

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a class="btn-read-more comnt-area-view ">Add Comment</a>
<div class="user-name disp-comment">
  <input type="text" class="form-control cmnt-namefld" placeholder="Enter your name">
  <textarea class="cmnt-txtarea" rows="4" cols="40" name="comment" form="usrform"></textarea>
  <input type="button" class="cmnt-btn" value="comment"></div>

<a class="btn-read-more comnt-area-view ">Add Comment</a>
<div class="user-name disp-comment">
  <input type="text" class="form-control cmnt-namefld" placeholder="Enter your name">
  <textarea class="cmnt-txtarea" rows="4" cols="40" name="comment" form="usrform"></textarea>
  <input type="button" class="cmnt-btn" value="comment">
</div>

2 个答案:

答案 0 :(得分:3)

我对您的代码没有做任何修改。让我知道这是否有帮助。谢谢。 这是the子https://plnkr.co/edit/KFh5EoROlsFs70U45jD4?p=preview

$(document).ready(function() {

  $(".disp-comment").hide();
  console.log($(".disp-comment"))

  $(".comnt-area-view").click(function() {
    if ($(this).next()[0].style.display == 'none')
      $(this).next().show()
    else
      $(this).next().hide()

  });
});

答案 1 :(得分:0)

$(function(){
             $(".disp-comment").hide();
                $(".comnt-area-view").click(function() {
                alert("hello");
                $(this).next(".disp-comment").toggle('hide, show');
            });
        })
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comments">
        <a class="btn-read-more comnt-area-view ">Add Comment</a>
        <div class="user-name disp-comment">
            <input type="text" class="form-control cmnt-namefld" placeholder="Enter your name">
            <textarea class="cmnt-txtarea" rows="4" cols="40" name="comment" form="usrform"></textarea>
            <input type="button" class="cmnt-btn" value="comment"></div>
        <div>
            <div class="comments">
                <a class="btn-read-more comnt-area-view ">Add Comment</a>
                <div class="user-name disp-comment">
                    <input type="text" class="form-control cmnt-namefld" placeholder="Enter your name">
                    <textarea class="cmnt-txtarea" rows="4" cols="40" name="comment" form="usrform"></textarea>
                    <input type="button" class="cmnt-btn" value="comment">
            </div>
      </div>