Question

我的页脚里面有一些内容。和我做了我的页脚显示\隐藏点击。但现在，如果我点击页脚内的任何项目（我有导航栏），我的页脚会对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; 我想在我的页脚内部建立链接，但是不要在点击链接时触发页脚显示\ hide

Answer 1

你可以添加

 $(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');
     });
});

Answer 2

出于各种原因，您实际上不应使用.live，而应将其替换为.on。无论如何，我认为这将有效：

... 'click', function (e) {
   if ($(e.target).not("[data-role=footer]")) {
      e.stopPropagation();
   }
});

Answer 3

这应该有用...我建议您使用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');
    }

 });

Answer 4

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

$("[data-role=footer] a").bind("click",function(){
    $.mobile.changePage($(this).attr("href"));
});

使点击仅适用于父项目

4 个答案: