jquery - 点击显示附件的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>

点击回形针图标，我希望显示类(class)。

这是我正在尝试使用 jquery。

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

下面是fiddle .

Answer 1

您的 JavaScript 末尾缺少右括号 - 您还需要在 fiddle 中使用 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;
});

updated fiddle