Question

我有一个显示/隐藏的消息正在工作。有一个主题和信息。我需要它才能工作，以便只显示标题的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 CODE

$(".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方法toggle

$("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();
   });

您需要使用note类将click事件绑定到div的子节点，并防止它冒泡。

jQuery在点击时显示/隐藏错误

2 个答案: