1

我有页脚，里面有一些内容。我让我的页脚显示\点击隐藏。但是现在，如果我单击页脚内的任何项目（我在那里有导航栏），我的页脚也会对 show\hide 做出反应。我如何只让父（页脚）对点击做出反应，而没有子元素？我正在使用jquery mobile。这是我的代码：

<div data-role="footer" data-id="main_footer" data-position="fixed" data-fullscreen="true" data-visible-on-page-show="false" data-tap-toggle="false" >


                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li><a id="menu-item-home" data-icon="custom" href="index.html" class="ui-btn-active ui-state-persist">&nbsp;</a></li>
                        <li><a id="menu-item-near-me" data-icon="custom" href="near-me.html">&nbsp;</a></li>
                        <li><a id="menu-item-rewards" data-icon="custom" href="rewards.html">&nbsp;</a></li>
                        <li><a id="menu-item-invite" data-icon="custom" href="invite.html">&nbsp;</a></li>
                        <li><a id="menu-item-profile" data-icon="custom" href="profile.html">&nbsp;</a></li>
                    </ul>
                </div><!-- /navbar -->
            </div>
            <!-- /footer -->
        </div>

和 JS

$("#index").live('pagecreate', function() {
            $("[data-role='footer']").live("click", function() {
            if ($("[data-role='footer']").hasClass('ui-fixed-hidden'))
            {
                $("[data-role='footer']").removeClass('ui-fixed-hidden');
            }
            else
            {
                $("[data-role='footer']").addClass('ui-fixed-hidden');
            }

                });
        });

TLDR；我想让我的页脚中的链接起作用，但在单击链接时不触发页脚显示\隐藏

4

4 回答 4

5

你可以添加

 $(document).on("click", "[data-role='footer'] li", function(e) {
     e.stopPropagation();
 });

请注意，我使用了不推荐使用on的代替。live还要注意 jQuery 有一个有用的toggleClass函数。因此，我建议您将现有代码替换为

$("#index").live('pagecreate', function() {
     $(document).on("click", "[data-role='footer'] li", function(e) {
        e.stopPropagation();
     });
     $(document).on("click", "[data-role='footer']", function() {
        $("[data-role='footer']").toggleClass('ui-fixed-hidden');
     });
});
于 2012-11-16T07:59:34.757 回答
1

这应该工作......我建议你on改用live......

$(document).on("click", "[data-role='footer']", function(e) {
    if(e.target != this){
      return;
    }

    if ($("[data-role='footer']").hasClass('ui-fixed-hidden'))
    {
       $("[data-role='footer']").removeClass('ui-fixed-hidden');
    }
    else
    {
        $("[data-role='footer']").addClass('ui-fixed-hidden');
    }

 });
于 2012-11-16T08:08:12.443 回答
1

由于各种原因，您实际上不应使用.live，而应将其替换为.on. 无论如何，我认为这会起作用：

... 'click', function (e) {
   if ($(e.target).not("[data-role=footer]")) {
      e.stopPropagation();
   }
});
于 2012-11-16T08:01:10.857 回答
0

所以你的问题是，页脚中的链接不起作用。最简单的解决方案是将click事件绑定到页脚内的链接，并使用$.mobile.changePage()或window.location()方法打开所需的 url。将此添加到您的代码中：

$("[data-role=footer] a").bind("click",function(){
    $.mobile.changePage($(this).attr("href"));
});
于 2012-11-16T09:04:48.063 回答