如何在文档加载完成后显示收件箱区域?

Question

基本上是尝试为我的个人作品集创建一种收件箱(更多的是学习经验，然后是严肃的，或使用)。

现在当这个文档在ajax/javascript函数中加载时，它加载显示所有电子邮件(而不是默认显示收件箱部分)

我已经尝试在javascript中添加一个函数"on document load"，但我相信我可能没有正确的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有短信收件箱加载时，页面加载?而不是不加载，并显示所有的电子邮件。

谢谢!

Answer 1

当试图隐藏和/或显示div时，jquery是您最好的朋友。它很简单，看起来很漂亮。

首先将你的read &"收件箱"

中的未读邮件

然后给你的每个收件箱div一个像"阅读"这样的id。,"unread"

使用下面的代码，您可以隐藏/显示您的个人div。

放置在你的<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