我的页脚里面有一些内容。我让我的页脚在点击时显示\隐藏。但是现在,如果我单击页脚内的任何项目(我在那里有导航栏),我的页脚也会对显示\隐藏使用react。我如何让父元素(页脚)对点击使用react,而不是子元素?我正在使用 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"> </a></li>
<li><a id="menu-item-near-me" data-icon="custom" href="near-me.html"> </a></li>
<li><a id="menu-item-rewards" data-icon="custom" href="rewards.html"> </a></li>
<li><a id="menu-item-invite" data-icon="custom" href="invite.html"> </a></li>
<li><a id="menu-item-profile" data-icon="custom" href="profile.html"> </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; 我想让页脚中的链接正常工作,但单击链接时不触发页脚显示\隐藏
最佳答案
你可以添加
$(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');
});
});
关于javascript - 使点击仅适用于父项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13412532/