2012-11-16 90 views
1

我的頁腳有一些內容。和我做了我的頁腳展示\隱藏點擊。但是現在,如果我點擊頁腳內的任何項目(我有導航欄),我的頁腳反應在show \ hide aswell。我如何只讓父(頁腳)對點擊產生反應,而沒有任何子元素?我正在使用jQuery手機。 這裏是我的代碼:僅對父項進行點擊操作

<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; 我要讓我的頁腳裏面工作的聯繫,但不會觸發頁腳顯示\隱藏,同時點擊鏈接

回答

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'); 
    }); 
}); 
+0

去哪裏?我不太滿意你想要的JS –

+0

,這並不重要。只是不在你現有的功能之一。 –

+0

問題是當我點擊頁腳內部的鏈接時,它不起作用。任何想法如何使他們只工作,而不觸發頁腳顯示\隱藏? –

1

替換現有代碼對於各種各樣的原因,你不應該實際使用.live,但.on代替它。無論如何,我認爲這會工作:

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

這應該工作...我建議ü上live使用on,而不是...

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

}); 
+1

它仍然觸發我的頁腳,如果我點擊導航欄內的鏈接 –

0

所以你的問題是,在鏈接頁腳不起作用。最簡單的解決方案是將click事件綁定到頁腳內的鏈接,並使用$.mobile.changePage()window.location()方法打開所需的url。加入你的代碼:

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

他們實際上工作,但是當我點擊鏈接,它會觸發我的頁腳顯示\隱藏也, m試圖讓鏈接不會觸發我的頁腳切換,而不會破壞jQuery Mobile的Ajax功能 –