Сообщения об ошибках с jquery и css

Question

Я пытаюсь развернуть сообщения при нажатии и свернуть их при нажатии на определенный элемент. Я использую два разных класса: один для того, когда элемент свернут, а другой - для отображения всего сообщения.

Проблема: элементы расширяются при нажатии, как ожидалось, но когда я нажимаю Распад элемент ничего не происходит (класс не меняется).

упрощенная версия HTML/JQuery/CSS используется показано ниже:

<div id="content"> 
    <div id="messages"> 
    <div class="collapsed_message"> 
     <!-- couple of other elements go here see jsfiddle--> 
     <div class="message_content"> 
      Message goes here 
     </div> 
     <span class="collapse_bar"> 
     <span class="re_collapse">[collapse]</span> 
     </span> 
    </div> 
    </div> 
</div> 

CSS:

.collapsed_message{ 
    overflow:hidden; 

} 
.entire_message{ 
    // other styling here 
} 

JavaScript/JQuery:

$(document).ready(function() { 
$(".collapsed_message").click(function() { 
    $(this).addClass('entire_message').removeClass("collapsed_message"); 
}); 
$(".re_collapse").click(function() { 
    $(this).parent().parent().addClass("collapsed_message").removeClass('entire_message'); 
}); 
}); 

Для получения полной копии кода см. jsfiddle: http://jsfiddle.net/8vDZb/

Answer 1

Во-первых, я бы предположил, что вы используете плагин, такой как Jquery-ui Accordion.

Если вы действительно хотите знать, что здесь не так:

У вас есть слушатель на .collapsed_message класса. После того, как вы нажмете на этот элемент, вызывается обратный вызов и класс удаляется. Тем не менее, слушатель по-прежнему подключен, поэтому, когда вы нажимаете на [свернуть], он вызывается снова, потому что .re_collapse содержится в элементе .collapsed_message.

Это означает, что оба обратных вызова запускаются.