Question

我尝试使用标题，ui-content和页脚创建一个简单的jquery移动页面。我使用jquery mobile 1.4.5和jquery 2.1.3。标题和ui-content div的效果很好，但页脚不显示。我认为它与此<div class="ui-content">有关，因为当我删除这些时，页脚会显示给用户。什么使<div class="ui-content">中的页脚未显示？

    <div data-role="page" id="main">
    <div data-role="header" data-theme="a">
        <h1>lenfr</h1>
    </div>
    <div class="ui-content">
        <?php
            include("list.php");
        ?>
        <div data-demo-html="true">
            <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
                <?php foreach ($result as $key => $row): ?>
                <li id ="listone" name="listone"  data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b ui-li-has-count ui-first-child"><?php echo $row['date']; ?></li>
                    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" >
                    <div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a class="ui-link-inherit"></a><p class="ui-li-aside ui-li-desc"><strong></strong><?php echo $row['time']; ?></p>
                        <p class="ui-li-desc"><strong><?php echo $row['title']; ?></strong></p>
                        <p class="ui-li-desc"><?php echo $row['text']; ?></p>

                        <p class="ui-li-desc"><strong><?php echo $row['town']; ?></strong></p> 
             <a class="commentbtn" data-rel="button" >comment</a>   
            <div style="width:25%" id="createcomment" class="comment" data-theme="a" >
    <form data-ajax="false" name="login-form" class="login-form" action="./comments.php" method="post" style="padding:20px 40px;">
        <div class="content">
        <div id="showcomments" data-theme="a" >
    <?php
include("showcomments.php");
?>
    <?php foreach ($comments as $keyComment => $rowComment): ?>
    <div>
    <p class="ui-li-desc"><strong><?php echo $rowComment['username']; ?></strong></p>
                        <p class="ui-li-desc"><?php echo $rowComment['comment']; ?></p>
                        </div>
                <?php endforeach; ?>
</div>
         <input type="hidden" name="id" id="id" value="<?php echo $row['id']; ?>" type="text" />
         <input type="hidden" name="autorpost" id="autorpost" value="<?php echo $row['autor']; ?>" type="text" />      
        </div>
        <div class="ui-grid-a">
        <div class="ui-block-a"><textarea rows="1" name="text" id="text" class="foo"></textarea></div>
         <div class="ui-block-b"><input type="submit" name="submit" data-icon="carat-r" value="comment" class="button" data-theme="a"/></div>       
        </div>  
    </form>
</div>

                    </li>

        <?php endforeach; ?>
                    <!-- foreach content -->
            </ul>
        </div>
    </div> <!-- end ui-content -->
</div> <!-- end page -->
</div> <!-- stray div tag -->
<div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="a">
    <div data-role="navbar" data-theme="a">
        <ul>
            <li><a href="#own posts" data-icon="comment" data-transition="fade">own posts</a></li>
            <li><a href="#main" data-icon="bars" data-transition="fade" class="ui-btn-active">main</a></li>
            <li><a href="#create post" data-icon="plus" data-transition="fade">create post</a></li>
        </ul>
    </div>
    <!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -- this /div is also obsolete since page is closed above -->

Answer 1

检查完代码后，我发现你在下面的评论中指出了两个迷路div标签：

<!-- main Seite -->
<div data-role="page" id="main">
    <div data-role="header" data-theme="a">
        <h1>lenfr</h1>
    </div>
    <div class="ui-content">
        <?php
            include("list.php");
        ?>
        <div data-demo-html="true">
            <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
                <?php foreach ($result as $key => $row): ?>
                    <!-- foreach content -->
                <?php endforeach; ?>
            </ul>
        </div>
    </div> <!-- end ui-content -->
</div> <!-- end page -->
<!-- </div> --> <!-- stray div tag -->
<div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="a">
    <div data-role="navbar" data-theme="a">
        <ul>
            <li><a href="#own posts" data-icon="comment" data-transition="fade">own posts</a></li>
            <li><a href="#main" data-icon="bars" data-transition="fade" class="ui-btn-active">main</a></li>
            <li><a href="#create post" data-icon="plus" data-transition="fade">create post</a></li>
        </ul>
    </div>
    <!-- /navbar -->
</div><!-- /footer -->
<!-- </div> --><!-- /page -- this /div is also obsolete since page is closed above -->

Answer 2

一个div元素超出其<li>

<div data-role="page" id="main">

<div data-role="header" data-theme="a">
    <h1>lendt</h1>

  </div>


    <div class="ui-content">                 
<?php
include("list.php");
?>

    <div data-demo-html="true">
                <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">

                <?php foreach ($result as $key => $row): ?>

                    <li id ="listone" name="listone"  data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b ui-li-has-count ui-first-child"><?php echo $row['date']; ?></li>
                    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" >
                    <div class="ui-btn-inner ui-li"></div><div class="ui-btn-text"><a class="ui-link-inherit"></a><p class="ui-li-aside ui-li-desc"><strong></strong><?php echo $row['time']; ?></p>
                        <p class="ui-li-desc"><strong><?php echo $row['title']; ?></strong></p>
                        <p class="ui-li-desc"><?php echo $row['text']; ?></p>

                        <p class="ui-li-desc"><strong><?php echo $row['town']; ?></strong></p> 
             <a class="commentbtn" data-rel="button" >comment</a>   
            <div style="width:25%" id="createcomment" class="comment" data-theme="a" >
    <form data-ajax="false" name="login-form" class="login-form" action="./comments.php" method="post" style="padding:20px 40px;">
        <div class="content">
        <div id="showcomments" data-theme="a" >
    <?php
include("showcomments.php");
?>
    <?php foreach ($comments as $keyComment => $rowComment): ?>
    <div>
    <p class="ui-li-desc"><strong><?php echo $rowComment['username']; ?></strong></p>
                        <p class="ui-li-desc"><?php echo $rowComment['comment']; ?></p>
                        </div>
                <?php endforeach; ?>
</div>
         <input type="hidden" name="id" id="id" value="<?php echo $row['id']; ?>" type="text" />
         <input type="hidden" name="autorpost" id="autorpost" value="<?php echo $row['autor']; ?>" type="text" />      
        </div>
        <div class="ui-grid-a">
        <div class="ui-block-a"><textarea rows="1" name="text" id="text" class="foo"></textarea></div>
         <div class="ui-block-b"><input type="submit" name="submit" data-icon="carat-r" value="comment" class="button" data-theme="a"/></div>       
        </div>  
    </form>
</div>
</div>
                    </li>

        <?php endforeach; ?>



</ul>


</div>
</div>


    <div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="a">
        <div data-role="navbar" data-theme="a">
            <ul>
                <li><a href="#own posts" data-icon="comment" data-transition="fade">own posts</a></li>              
                <li><a href="#main" data-icon="bars" data-transition="fade" class="ui-btn-active">main</a></li>
                <li><a href="#create post" data-icon="plus" data-transition="fade">create post</a></li>
            </ul>
        </div><!-- /navbar -->       
    </div><!-- /footer -->            
</div><!-- /page -->

在foreach循环后，页脚不会显示

2 个答案: