jQuery单击时显示/隐藏错误

Question

我有显示/隐藏正在运行的消息。 有一个主题和消息。 我需要它工作，以便只有标题的onClick才会显示该消息。 当我单击消息标题时，它会打开消息，但是当消息打开时，如果我单击消息，它就会隐藏。 因为我将在消息中包含一些链接，所以这是行不通的。 我只需要单击标题的onclick即可显示和隐藏消息。

HTML / PHP代码：

<div id="note_container">
  <div id='empty_msg' style="display:none;">You do not currently have any notifications in your <span id='box_type'>INBOX</span></div>
  <!-- Content -->
          <?
          if(!empty($notes)):
              foreach($notes as $box_type=>$notes_array):

                if(!empty($notes_array)):
                    foreach($notes_array as $note):

                    $envelope_icon = ($note['opened']==1)?'icon_opened.jpg':'icon_closed.jpg';

          ?>
          <div id="note_<?=$note['note_id']?>" class='hdr_active <?=$box_type?>_item'>
           <input type="checkbox" name="notes_chk" value="<?=$note['note_id']?>" class="notes_chk" style="float:right;"/></label>
           <div style='display:inline-block;' id='note_<?=$note['note_id']?>' class="note new_note hide">
                <img src="images/buttons/<?=$envelope_icon?>" id='note_indicator_<?=$note['note_id']?>' class="note_indicator" width="20" height="19" />
                <?=$note['subject']?>
                <div id='note_details_<?=$note['note_id']?>' class="details" style="display: none">
                    <p><?=$note['message']?></p>
                </div>
            </div>
           </div>
          <?
                    endforeach;
                 endif;
              endforeach;
          endif;
          ?>


 </div><!-- END NOTE CONTAINER -->

jQuery代码

$(".note").click(function(){    
    // get the search values
    var id = $(this).attr('id')
    var id_array = id.split('_')
    var note_num = id_array[1]

    if($(this).hasClass('hide'))
    {
        $(this).removeClass('hide').addClass('show')
        $("#note_details_"+note_num).slideDown()

        if($(this).hasClass('new_note')){

            var notes = [note_num]
            $(this).removeClass('new_note')
            $("#note_indicator_"+note_num).attr("src","images/buttons/icon_opened.jpg");

            $.ajax({
              type: "POST",
              url: "ajax-redirect.php",
              data: { type: 'markRead', notes: notes, page:'ajax.php' }
                }).done(function(data) {

                    $(".notes_chk").removeAttr('checked')

                    if(data!=1)
                    {
                        alert("failed to update the system")
                        $("#note_indicator_"+note_num).attr("src","images/buttons/icon_closed.jpg");
                    }
                })



        }
    }
    else
    {
        $(this).removeClass('show').addClass('hide')
        $("#note_details_"+note_num).slideUp()
    }

})
     $('#check-all').click(function(){
     $("input:checkbox").attr('checked', true);
  });
     $('#uncheck-all').click(function(){
     $("input:checkbox").attr('checked', false);
  });


})

Answer 1

请阅读jQuery文档！ 对于这种情况，您可以使用本机jQuery方法切换

$("div.note").click(function(){
   $(this).toggle(); // or some other selector
});

或者.note是链接

   $("div.note").click(function(e){
       e.preventDefault();
       $(".your_block").toggle(); // or some other selector
    });

Answer 2

由于具有note类的div是消息的父级，因此其子级上的所有事件都会冒泡，因此您需要使用event.stopPropagation（）来防止这种情况。

我无法测试此代码（我没有原始HTML可以这样做），但它应该表示需要完成的工作：

$(".note").children().click(function(e) {
        e.stopPropagation();
   });

您需要将click事件绑定到具有note类的div的子级，并防止其冒泡。