Question

我用4个按钮固定页脚。当任何listitem进入这个页脚（页脚后面），并点击页脚按钮时。

期望 - 必须触发页脚按钮单击事件。实际 - 页脚后面的ListItem正在触发。

更新 -

index.html页面

<div data-role="header" data-position="fixed" data-theme="f">
    <a href='#'><img class="back"/></a>
    <div class="logo"><img class="logoimg"/></div>
    <a href='#' class="ui-btn-right"><img class="btn_toplogout"/></a>
</div><!-- /header -->

<div data-role="content">
    <div class="ui-caption"><span id="txt_airtime_topup"></span></div>
    <form name="topup" autocomplete="off">
    <h4><span id="txt_operator"></span>:</h4>
    <div class="ui-droplist" id="topup_operatordroplist">
        <select id="t_operator" name="t_operator" data-theme="drop" data-icon="circle_d">
        </select>
    </div>
    <h4><span id="txt_recptmsisdn"></span>:</h4>
    <div class="ui-droplist" id="topup_persondroplist">
        <select id="topup_person" name="topup_person" data-theme="drop" data-icon="circle_d" onChange="topup_update_contacts();">
        </select>
    </div>
    <div class="input-contain">
    <input type="tel" id="t_number" maxlength="14" name="t_number" placeholder="IDNO: (leave empty for yourself)" autocomplete="off"/>
    </div>
    <fieldset class="ui-grid-a">
    <div class="ui-block-a">
        <h4><span id="txt_amount2"></span>:</h4>
        <div class="input-contain amount-margin">
        <input type="number" id="ppamount" name="ppamount" maxlength="8" class="ui-amount" min="0" autocomplete="off"/>
    </div>
    </div>
    <div class="ui-block-b">
        <h4><span id="txt_currency"></span>:</h4>
        <div class="ui-droplist">
            <select id="p_currency" data-theme="drop" data-icon="circle_d">
            <option value="EUR">EUR</option>
            </select>
        </div>
    </div>
    </fieldset>
    </form>
    <a href="#" id="btn_topup" class="ui-button" data-role="button" data-theme="red"></a>
</div><!-- /content -->

<div data-role="footer" data-id="btmmenu" data-position="fixed" data-theme="f" class="postlogin">
    <div data-role="navbar"><ul>
    **<li><a href="#home">Home</a></li>          //this is footer
    <li><a href="#transfer">Send Money</a></li>
    <li><a href="#paybill">Pay Bills</a></li>
    <li><a href="#manage">Manage Accounts</a></li>** 
    </ul></div>
</div><!-- /footer -->

页脚下的

下拉列表 -

<h4>Currency:</h4>
            <div class="ui-droplist">
                <select id="request_currency" data-theme="drop" data-icon="circle_d">
                    <option value="EUR">EUR</option>
                </select>
            </div>

CSS -

.ui-droplist .ui-btn-active {
border: 1px solid       #808080;
background:             #fdfdfd;
font-weight: bold;
color:                  #111111;
text-shadow: 0 1px 1px #ffffff;
background-image: url(images/arrow_down.png),
-webkit-gradient(linear, left top, left bottom, from( #eee ), to( #fdfdfd )); /* Saf4+, Chrome */
background-image: url(../../exclusive/images/arrow_down.png),
-webkit-linear-gradient(#eee , #fdfdfd ); /* Chrome 10+, Saf5.1+ */
background-image: url(../../exclusive/images/arrow_down.png),
   -moz-linear-gradient(#eee , #fdfdfd ); /* FF3.6 */
background-image: url(../../exclusive/images/arrow_down.png),
    -ms-linear-gradient(#eee , #fdfdfd ); /* IE10 */
background-image: url(../../exclusive/images/arrow_down.png),
     -o-linear-gradient(#eee , #fdfdfd ); /* Opera 11.10+ */
background-image: url(../../exclusive/images/arrow_down.png),
        linear-gradient(#eee , #fdfdfd );
background-position: right center !important;
background-repeat: no-repeat !important;
}

页脚css -

.postlogin.ui-footer .ui-navbar li.ui-block-a a .ui-btn-inner {
background-image: url(images/icon-home.png);
background-repeat: no-repeat;
background-position: 50% 0;
}

Answer 1

在执行以下操作时，我没有遇到您提到的问题：

index.html的示例：

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

        <!-- THIS FILE CONTAINS THE CSS YOU POSTED -->
        <link rel="stylesheet" href="./css/test.css" />        
    </head>

    <body>

        <!-- THIS PAGE CONTAINS THE HTML CODE YOU POSTED + SEVERAL DROP DOWN LIST IN QUESTION -->
        <div data-role="page" id="mine">

            <div data-role="header" data-position="fixed" data-theme="f">
                <a href='#'><img class="back"/></a>
                <div class="logo"><img class="logoimg"/></div>
                <a href='#' class="ui-btn-right"><img class="btn_toplogout"/></a>
            </div><!-- /header -->

            <div data-role="content">
                <div class="ui-caption"><span id="txt_airtime_topup"></span></div>
                <form name="topup" autocomplete="off">
                <h4><span id="txt_operator"></span>:</h4>
                <div class="ui-droplist" id="topup_operatordroplist">
                    <select id="t_operator" name="t_operator" data-theme="drop" data-icon="circle_d"></select>
                </div>
                <h4><span id="txt_recptmsisdn"></span>:</h4>
                <div class="ui-droplist" id="topup_persondroplist">
                    <select id="topup_person" name="topup_person" data-theme="drop" data-icon="circle_d" onChange="topup_update_contacts();"></select>
                </div>
                <div class="input-contain">
                    <input type="tel" id="t_number" maxlength="14" name="t_number" placeholder="IDNO: (leave empty for yourself)" autocomplete="off"/>
                </div>
                <fieldset class="ui-grid-a">
                    <div class="ui-block-a">
                        <h4><span id="txt_amount2"></span>:</h4>
                        <div class="input-contain amount-margin">
                            <input type="number" id="ppamount" name="ppamount" maxlength="8" class="ui-amount" min="0" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <h4><span id="txt_currency"></span>:</h4>
                        <div class="ui-droplist">
                            <select id="p_currency" data-theme="drop" data-icon="circle_d">
                                <option value="EUR">EUR</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
                </form>
                <a href="#" id="btn_topup" class="ui-button" data-role="button" data-theme="red"></a>

                <!-- DROP DOWN LISTS IN QUESTION -->    
                <h4>Currency:</h4>
                <div class="ui-droplist">
                    <select id="request_currency" data-theme="drop" data-icon="circle_d">
                        <option value="EUR">EUR</option>
                    </select>
                </div>

                <h4>Currency:</h4>
                <div class="ui-droplist">
                    <select id="request_currency" data-theme="drop" data-icon="circle_d">
                        <option value="EUR">EUR</option>
                    </select>
                </div>

                <h4>Currency:</h4>
                <div class="ui-droplist">
                    <select id="request_currency" data-theme="drop" data-icon="circle_d">
                        <option value="EUR">EUR</option>
                    </select>
                </div>

                <h4>Currency:</h4>
                <div class="ui-droplist">
                    <select id="request_currency" data-theme="drop" data-icon="circle_d">
                        <option value="EUR">EUR</option>
                    </select>
                </div>
                <!-- DROP DOWN LISTS IN QUESTION -- END -->

            </div><!-- /content -->

            <div data-role="footer" data-id="btmmenu" data-position="fixed" data-theme="f" class="postlogin">

                <!-- YOUR FOOTER'S BUTTONS -->
                <div data-role="navbar"><ul>
                    <li><a href="#home">Home</a></li> 
                    <li><a href="#transfer">Send Money</a></li>
                    <li><a href="#paybill">Pay Bills</a></li>
                    <li><a href="#manage">Manage Accounts</a></li>
                </ul></div>

            </div><!-- /footer -->

        </div>

        <!-- THE LINK REFERENCES OF YOUR FOOTER'S BUTTON -->
        <div data-role="page" id="home">
            <div data-role="content">
                1 - HOME
            </div>
        </div>

        <div data-role="page" id="transfer">
            <div data-role="content">
                2 - TRANSFER
            </div>
        </div>

        <div data-role="page" id="paybill">
            <div data-role="content">
                3 - PAYBILL
            </div>
        </div>

    <div data-role="page" id="manage">
            <div data-role="content">
        4 - MANAGE
            </div>
    </div>
        <!-- THE LINK REFERENCES OF YOUR FOOTER'S BUTTON -- END -->

    </body>
</html>

您的CSS，包含在test.css中：

.ui-droplist .ui-btn-active {
border: 1px solid       #808080;
background:             #fdfdfd;
font-weight: bold;
color:                  #111111;
text-shadow: 0 1px 1px #ffffff;
background-image: url(images/arrow_down.png),
-webkit-gradient(linear, left top, left bottom, from( #eee ), to( #fdfdfd )); /* Saf4+, Chrome */
background-image: url(../../exclusive/images/arrow_down.png),
-webkit-linear-gradient(#eee , #fdfdfd ); /* Chrome 10+, Saf5.1+ */
background-image: url(../../exclusive/images/arrow_down.png),
   -moz-linear-gradient(#eee , #fdfdfd ); /* FF3.6 */
background-image: url(../../exclusive/images/arrow_down.png),
    -ms-linear-gradient(#eee , #fdfdfd ); /* IE10 */
background-image: url(../../exclusive/images/arrow_down.png),
     -o-linear-gradient(#eee , #fdfdfd ); /* Opera 11.10+ */
background-image: url(../../exclusive/images/arrow_down.png),
        linear-gradient(#eee , #fdfdfd );
background-position: right center !important;
background-repeat: no-repeat !important;
}

.postlogin.ui-footer .ui-navbar li.ui-block-a a .ui-btn-inner {
background-image: url(images/icon-home.png);
background-repeat: no-repeat;
background-position: 50% 0;
}

单击页脚按钮时，下拉列表位于页脚后面，按钮/链接会正常触发并重定向到关联页面。

例如，如果我点击名为Manage的页脚按钮/链接，如下所示：

drop down list behind the footer

下拉列表未触发，我按预期重定向到Manage页面：

button / link successful

我不知道您的问题是否与您使用的jQuery Mobile版本或设备（Android，iPhone，Blackberry等？）有关...

为了您的信息，我使用了jQuery Mobile版本1.1.1，我使用iPhone 5测试了上面的示例。

即使我使用jQuery Mobile 1.1.1测试你的代码，我建议你使用最新版本（目前1.2，检查http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/），这更正了许多错误在旧版本中找到。

希望这对你有用。

如果listitem位于JQM + phonegap Android中的页脚后面，则不会触发页脚按钮

1 个答案: