单击显示附件div

时间:2016-12-09 10:11:01

标签: jquery html css twitter-bootstrap

我的html中有一个如下所示的div,默认显示为none。

class ViewController: UIViewController {

    @IBOutlet var textFieldContainer: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override var canBecomeFirstResponder: Bool {
        return true
    }

    override var inputAccessoryView: UIView {
        get {
            return self.textFieldContainer
        }
    }

}

现在我有一个如下表格

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

点击回形针图标,我希望展示课程。

这是我正在尝试使用jquery。

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

以下是fiddle

1 个答案:

答案 0 :(得分:5)

您在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;
});

updated fiddle