jquery - 标记在 div 右边缘的关闭按钮面临的问题

Question

我有一个 id #feedback 的 div。当我点击它时，另一个 ID 为#feedback-form 的 div 向下滑动。除此之外，#feedback div 的右边缘也标记了一个关闭按钮。

这是行不通的。

除此之外，我还希望当我单击关闭按钮时，#feedback-form div 应该向上滑动并且关闭按钮应该消失。

但这并不奏效。请提供一些解决方案。

这是一个 fiddle :http://jsfiddle.net/ncR2L/

js:

$('#feedback').click(function(){
    $('#feedback-form').slideDown();
    $('#feedback').find('i').show();    
}); 

$('#feeback').find('i').click(function(){
    $('#feedback').find('i').hide();
    $("#feedback-form").slideUp();
});

CSS:

#feedback{
width:120px;
height:40px;
cursor:pointer;
background:#36F;
}
#feedback i{
float:right;
display:block;
position:relative;
top:-5px;
right:-5px;
color:red;
background:white;
display:none;
}
#feedback-form{
display:none;
position:absolute;  
margin-top:30px;
}
#feed-form{
width:400px;
text-align:center;
}
#feed-form fieldset{
border: 0 none;
padding: 20px;  
background:rgba(96,0,0,0.8);
width:80%;
}
#feed-form fieldset input,textarea{
padding:7px;
width: 80%;
border:2px solid #ccc;
margin-bottom:15px;
color: #2C3E50;
}

html:

<div id="feedback"><span>Feedback</span><i class="fa fa-times-circle"></i>
    <div id="feedback-form">
      <form method="post" id="feed-form">
      <fieldset>
      <h2> Tell Us What You Think</h2>
      <input type="text" placeholder="Enter Your Name" />
      <input type="email" placeholder="Enter Your Email" />
      <textarea rows="4" cols="40" placeholder="Your message"></textarea>
      <input type="submit" value="Submit" class="submit" />
      </fieldset>
      </form>

      </div>
</div> 

Answer 1

首先，您在 jQuery 中编写了 #feeback 而不是 #feedback。

然后，当您单击也在#feedback 中的 i 元素时，您将触发不需要的 slideDown。为避免这种情况，请使用 e.stopPropagation()，如下所示:

$('#feedback').click(function(){
    $('#feedback-form').slideDown();
    $('#feedback').find('i').show();    
}); 

$('#feedback').find('i').click(function(e){
    e.stopPropagation();
    $('#feedback').find('i').hide();
    $("#feedback-form").slideUp();

});

Fiddle Demo