0

在我的项目中，我有一些带有图标的按钮工作正常，但问题是当我长按按钮时它保持活动状态，除非我按下其他按钮可以告诉我问题是什么以及我该如何解决这个问题。
这是 btn 活动状态的 css 代码。

.ui-btn-active {
border: 1px solid #ccc;
background: #B4B7BA;
font-weight: 700;
color: #fff;
cursor: pointer;
text-shadow: 0 1px 0 #EDF1F4;
text-decoration: none;
background-image: -webkit-linear-gradient(#5393c5, #6facd5);
background-image: -moz-linear-gradient(#5393c5, #6facd5);
background-image: -ms-linear-gradient(#5393c5, #6facd5);
background-image: -o-linear-gradient(#5393c5, #6facd5);
background-image: linear-gradient(#5393c5, #6facd5);
font-family: Helvetica, Arial, sans-serif  }
4

1 回答 1

1

我遇到了类似的问题，并通过以下方式解决了它：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test App</title>

    <script type="text/javascript" src="cordova-2.8.0.js"></script>
    <script type="text/javascript" src ="assets/lib/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src ="assets/lib/jquery.mobile-1.2.0.min.js"></script>
    <link rel="stylesheet" href="assets/lib/jquery.mobile-1.2.0.css" type="text/css" />

    <script type="text/javascript" >
        $.mobile.defaultPageTransition = 'none'; // Remove default page transition
        $('div[data-role="page"]').on('pagecreate',function(event, ui){
            $('div[data-role="footer"] a', $(this)).on("taphold",function(e){
                $(this).addClass("ui-btn-active");
                 $(this).one("touchend", function(e){
                       e.preventDefault();
                       $(this).trigger("click", e.data); // Remove this if you don't want the long press to act as a click
                       $(this).removeClass("ui-btn-down-a ui-btn-active");
                       return false;
                    });
                });
           });
    </script>
</head>
<body>
    <div data-role="page" id="page-1">
        <div data-role="content">                   
            <p>Page 1</p>
        </div>
        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#page-1">Page 1</a></li>
                    <li><a href="#page-2">Page 2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div data-role="page" id="page-2">
        <div data-role="content">           
            <p>Page 2</p>

        </div>
        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#page-1">Page 1</a></li>
                    <li><a href="#page-2">Page 2</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

你可以在这里下载我的 Eclipse 项目和编译的 APK

于 2013-06-22T15:18:27.437 回答