一旦文檔完成加載後，如何顯示收件箱區域？

Question

基本上試圖爲我的人物組合創建一種收件箱（更多的是學習體驗，然後是任何嚴肅的或有用的）。

當AJAX/javascript函數內的這個文件加載，加載顯示所有電子郵件（而不是僅僅顯示默認的收件箱部分）

我試着對文檔添加一個JavaScript函數」現在加載「，但我相信我可能沒有正確的CSS或任何東西。

我的代碼如下：

<div id="messages" class="container-fluid"> 
    <div class="row"> 
     <div id="breadcrumb" class="col-xs-12"> 
      <a href="#" class="show-sidebar"> 
       <i class="fa fa-bars"></i> 
      </a> 
      <ol class="breadcrumb pull-left"> 
       <li><a href="dashboard.php">Dashboard</a></li> 
       <li><a href="#">Modules</a></li> 
       <li><a href="#">Messages</a></li> 
      </ol> 
      <div id="social" class="pull-right"> 
       <a href="#"><i class="fa fa-google-plus"></i></a> 
       <a href="#"><i class="fa fa-facebook"></i></a> 
       <a href="#"><i class="fa fa-twitter"></i></a> 
       <a href="#"><i class="fa fa-linkedin"></i></a> 
       <a href="#"><i class="fa fa-youtube"></i></a> 
      </div> 
     </div> 
    </div> 
    <div class="row" id="test"> 
     <div class="col-xs-12"> 
      <div class="row"> 
       <ul id="messages-menu" class="nav msg-menu"> 
        <li> 
         <a href="#" class="" id="msg-inbox"> 
          <i class="fa fa-inbox"></i> 
          <span class="hidden-xs">Inbox (<?php echo $inboxCount; ?>)</span> 
         </a> 
        </li> 
        <li> 
         <a href="#" class="" id="msg-starred"> 
          <i class="fa fa-star"></i> 
          <span class="hidden-xs">Unread (<?php echo $unreadCount; ?>)</span> 
         </a> 
        </li> 
        <li> 
         <a href="#" class="" id="msg-important"> 
          <i class="fa fa-bookmark"></i> 
          <span class="hidden-xs">Read (<?php echo $readCount; ?>)</span> 
         </a> 
        </li> 
        <li> 
         <a href="#" class="" id="msg-trash"> 
          <i class="fa fa-trash-o"></i> 
          <span class="hidden-xs">Trash (<?php echo $trashCount; ?>)</span> 
         </a> 
        </li> 
       </ul> 

       <div id="messages-list" class="col-xs-10 col-xs-offset-2"> 
        <?php 
        while ($row = mysqli_fetch_assoc($getEmails)) { 
         $email_id = $row['email_id']; 
         $emailStatus = $row['emailStatus']; 
         $contactName = $row['contactName']; 
         $contactEmailAddress = $row['contactEmailAddress']; 
         $messageBody = $row['messageBody']; 
         $tempEmailDate = $row['emailDate']; 
         $emailDate = date("d-m-Y", strtotime($tempEmailDate)); 
         $contactName = strtoupper($contactName); 
         $contactEmailAddress = strtoupper($contactEmailAddress); 
         if ($row == 1 && ($emailStatus == 1 || $emailStatus == 2)) { 
          echo " 
            <div class='row one-list-message msg-inbox-item' id='msg-one'> 
             <div class='col-xs-1 checkbox'> 
               <label> 
                <input type='checkbox'>$contactName 
                <i class='fa fa-square-o small'></i> 
               </label> 
             </div> 
             <div class='col-xs-9 message-title'>$messageBody</div> 
             <div class='col-xs-2 message-date'>$emailDate</div> 
            </div> 
            "; 
         } else if ($emailStatus == 1 || $emailStatus == 2) { 
          echo " 
            <div class='row one-list-message msg-inbox-item'> 
             <div class='col-xs-1 checkbox'> 
               <label> 
                <input type='checkbox'>$contactName 
                <i class='fa fa-square-o small'></i> 
               </label> 
             </div> 
             <div class='col-xs-9 message-title'>$messageBody</div> 
             <div class='col-xs-2 message-date'>$emailDate</div> 
            </div> 
            "; 
         } 
         if ($emailStatus == 1) { 
          // Unread section 
          echo " 
           <div class='row one-list-message msg-starred-item'> 
            <div class='col-xs-1 checkbox'> 
             <label> 
              <input type='checkbox'>$contactName 
              <i class='fa fa-square-o small'></i> 
             </label> 
            </div> 
            <div class='col-xs-9 message-title'>$messageBody</div> 
            <div class='col-xs-2 message-date'>$emailDate</div> 
           </div> 
           "; 
          $updateEmailStatus = mysqli_query($db, "UPDATE emails SET emailStatus='2' WHERE email_id='$email_id'"); 
         } else { 
          if ($emailStatus == 2) { 
           // Read section 
           echo " 
            <div class='row one-list-message msg-important-item'> 
             <div class='col-xs-1 checkbox'> 
               <label> 
                <input type='checkbox'>$contactName 
                <i class='fa fa-square-o small'></i> 
               </label> 
             </div> 
             <div class='col-xs-9 message-title'>$messageBody</div> 
             <div class='col-xs-2 message-date'>$emailDate</div> 
            </div> 
            "; 
          } else { 
           if ($emailStatus == 3) { 
            // Deleted section 
            echo " 
            <div class='row one-list-message msg-trash-item'> 
             <div class='col-xs-1 checkbox'> 
               <label> 
                <input type='checkbox'>$contactName 
                <i class='fa fa-square-o small'></i> 
               </label> 
             </div> 
             <div class='col-xs-9 message-title'>$messageBody</div> 
             <div class='col-xs-2 message-date'>$emailDate</div> 
            </div> 
            "; 
           } 
          } 
         } 
        } 
        ?> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#msg-inbox').show(); 
    }); 
    // Add listener for redraw menu when windows resized 
    window.onresize = MessagesMenuWidth; 
    $(document).ready(function() { 
     // Add class for correctly view of messages page 
     $('#content').addClass('full-content'); 
     // Run script for change menu width 
     MessagesMenuWidth(); 
     $('#content').on('click','[id^=msg-]', function(e){ 
      e.preventDefault(); 
      $('[id^=msg-]').removeClass('active'); 
      $(this).addClass('active'); 
      $('.one-list-message').slideUp('fast'); 
      $('.'+$(this).attr('id')+'-item').slideDown('fast'); 
     }); 
     $('html').animate({scrollTop: 0},'slow'); 
    }); 
</script> 

任何人都可以看我怎麼會做的JavaScript有MSG-收件箱中加載頁面加載時？而不是加載沒有和顯示所有電子郵件。

謝謝！

Answer 1

當試圖隱藏和/或顯示div時，jquery是你最好的朋友。這很簡單，看起來不錯。

開始通過包裝你的「收件箱」

然後給每個收件箱的DIV ID讀&未讀消息的div就像一個ID爲「讀」 &「未讀」

使用下面你的代碼可以隱藏/顯示您的個人divs。

將這個你<head> </head>標籤

<script src="JS/jquery/jquery-1.11.2.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#Unread").click(function(){ 
    $("#unread").slideToggle(500, function() { 
    }); 
    }); 
    $("#Read").click(function(){ 
    $("#read").slideToggle(500, function() { 
    }); 
    }); 
    $("#Deleted").click(function(){ 
    $("#deleted").slideToggle(500, function() { 
    }); 
    }); 
}); 
</script> 
<style> 
#unread { 
    display: none; 
} 
#read { 
    display: none; 
} 
#deleted { 
    display: none; 
} 
</style> 

之間。然後在你的頁面的主體，你可以做這樣的事情

<div id="inbox"> 
<div id="unread_msgs"> 
<button id="Unread">Show/Hide Unread</button> 
<div id="unread"> 
    <p>These </p> 
    <p>are</p> 
    <p>my</p> 
    <p>unread</p> 
    <p>messages</p> 
</div><!-- end unread --> 
</div><!-- end unread_msgs --> 
<div id="read_msgs"> 
<button id="Read">Show/Hide Read</button> 
<div id="read"> 
    <p>These </p> 
    <p>are</p> 
    <p>my</p> 
    <p>read</p> 
    <p>messages</p> 
</div><!-- end read --> 
</div><!-- end read_msgs --> 
</div><!-- end inbox --> 
<div id="deleted_msgs"> 
<button id="Deleted">Show/Hide Deleted</button> 
<div id="deleted"> 
    <p>These </p> 
    <p>are</p> 
    <p>my</p> 
    <p>deleted</p> 
    <p>messages</p> 
</div> 
</div> 

希望這有助於。它應該讓你朝着正確的方向前進。

快樂編碼！

參考

jquery slidetoggle