单击显示附件div

Question

我的html中有一个像下面这样的div,默认情况下没有显示.

<div class="attach-div" style ="display:none;">
    <button><i class="fa fa-smile-o" aria-hidden="true"></i></button>
    <button><i class="fa fa-smile-o" aria-hidden="true"></i></button>
    <button><i class="fa fa-smile-o" aria-hidden="true"></i></button>
</div>

现在我有一个如下表格

<div class="form-comment">
 <form action="">
  <div class="con">
     <button><i class="fa fa-smile-o" aria-hidden="true"></i></button>
     <input type="text" placeholder="Your Response">
     <button class=""><i class="fa fa-paperclip attach-detail" aria-hidden="true"></i></button>
   </div>
     <input type="button" class="submit" value="ADD">
  </form>
 </div>

单击回形针图标,我希望显示该课程.

这是我正在尝试使用jquery.

$(".attach-detail").click(function() {
  $(".attach-div").css('display', 'block');
});

下面是小提琴.

Answer 1

你在JavaScript的末尾错过了一个结束括号 - 你还需要在你的小提琴中使用attach-div类.

$(".attach-detail").click(function() {
  $(".attach-div").css('display', 'block');
});

您可能还想阻止默认的提交行为(导致回发)

通过阻止默认操作并返回false来执行此操作:

$(".attach-detail").click(function(e) {
    e.preventDefault();
    $(".attach-div").css('display', 'block');
    return false;
});

更新小提琴