[英]jQuery - Activating one toggle button disables the other
我在使用两个jQuery切换按钮时遇到问题。 它们用于移动导航按钮:
(function($) {
$(function() {
$('#mobile-nav-button').toggle(
function() {
$('#fullpage').animate({ left: 250 }, 'normal', function() {
$('#mobile-nav-button').html('Close');{
$('#social-nav-panel').hide();
}
});
},
function() {
$('#fullpage').animate({ left: 0 }, 'normal', function() {
$('#mobile-nav-button').html('Open');
});
}
);
$('#social-nav-button').toggle(
function() {
$('#fullpage').animate({ right: 250 }, 'normal', function() {
$('#social-nav-button').html('Close');
});
},
function() {
$('#fullpage').animate({ right: 0 }, 'normal', function() {
$('#social-nav-button').html('Open');
});
}
);
});
})(jQuery);
靠自己,他们工作得很好。 第一个按钮#mobile-nav-button每次都能完美运行。 第二个按钮#social-nav-button也可以正常工作。 但是,如果选择了#mobile-nav-button,那么#social-nav-button将停止工作(反之亦然,因为#mobule-nav-button始终可以工作,即使#social-nav -按钮已被选中)。
我已经在堆栈溢出上看到很多类似的帖子(尽管不是同一问题),但是可悲的是,我的JS / jQuery知识远不足以对我的问题进行任何修复。
任何帮助将不胜感激!
您可以查看我的示例: 切换按钮显示和隐藏
HTML:
<button type="button" id="mobile_bt">Mobile</button>
<button type="button" id="social_bt">Social</button>
使用jQuery的JS:
$('#mobile_bt').click(function() {
var help= $(this);
$('#social_bt').toggle('slow', function() {
help.hide();
$(this).show();
});
});
$('#social_bt').click(function() {
var help= $(this);
$('#mobile_bt').toggle('slow', function() {
help.hide();
$(this).show();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.