爲什麼我的單選按鈕不能直觀地改變？變化激發但視覺外觀不變

Question

問題：單選按鈕觸發更改，但不更改視覺外觀。

我有一個簡單的表單，可以發佈狀態更新或新的博客文章。除了textarea之外，所有表單域都隱藏在頁面加載中。當你點擊textarea時，會出現更多的表單，其中包括兩個單選按鈕，可讓您在狀態更新或博客文章之間進行選擇。兩者之間的區別在於，如果您單擊標準單選按鈕，則博客文章會獲得一個名爲「帖子標題」的附加字段。該方案將在此設立提琴：

http://jsfiddle.net/XH7eP/1/

所以這裏的問題。您會注意到，如果您單擊「標準」帖子格式，帖子標題字段確實按預期顯示。改變是射擊，但單選按鈕沒有改變其視覺外觀。您可以單擊任意一個來顯示/隱藏帖子標題字段，但視覺外觀不會改變。

我很難過。任何見解都將非常感激。這裏是小提琴的代碼。

<form id="new_post_form" name="status_update" method="post" action=""> 
<p>Update your status</p> 
<div class="upper"> 
    <div class="new_post_form_hiding_fields hide"> 
     <label>Post Format: </label> 
     <input type="radio" name="new_post_format" id="status-post-format" class="post-format-radio" value="status" checked="checked" /> <label>status</label> 
     <input type="radio" name="new_post_format" id="standard-post-format" class="post-format-radio" value="standard" /> <label>standard</label> 
     <div class="standard_post_format_fields hide"> 
      <label>Post Title</label> 
      <input type="text" id="new_post_title" name="title" value="" tabindex="3" /> 
     </div> 
    </div> 
</div> 
<textarea name="post_content" id="new_post_content" tabindex="2" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 47px;"></textarea> 
<div class="new_post_form_hiding_fields hide"> 
    <input type="submit" id="new_post_submit" value="submit" tabindex="6" /> 
</div> 
</form> 

jQuery的未來

$('#new_post_form').click(function(e) { 
$('.new_post_form_hiding_fields').slideDown(); 
e.stopPropagation(); 
return false; 
}); 
$(document).click(function() { 
if($('.new_post_form_hiding_fields').is(":visible")) { 
    $('.new_post_form_hiding_fields').slideUp(); 
} 
}); 

$('.post-format-radio').click(function() { 
if($('#standard-post-format').prop('checked')) { 
    $('.standard_post_format_fields').fadeIn(); 
} else { 
    $('.standard_post_format_fields').fadeOut(); 
} 
}); 

Answer 1

當您使用stopPropagation返回false意味着你要停止任何點擊執行，停止傳播後，其不需要任何回報的方法將防止事件從護理冒泡。

$('#new_post_form').click(function(e) { 
$('.new_post_form_hiding_fields').slideDown(); 
e.stopPropagation(); }); 

jsfiddle.net/XH7eP/3/