jQuery - 激活一个切换按钮会禁用另一个

jQuery - Activating one toggle button disables the other

本文关键字：按钮 另一个 一个 激活 jQuery      更新时间：2023-09-26

我在使用两个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 导航按钮每次都能完美运行。第二个按钮 #social 导航按钮也可以正常工作。但是，如果选择了 #mobile-nav-button，则 #social-nav-button将停止工作（这不适用于相反的方式，因为 #mobule-nav-button将始终有效，即使选择了 #social-nav-button）。

我已经看到了很多关于堆栈溢出的类似帖子（虽然不是同一个问题），但遗憾的是，我的 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();
  });
});
相关文章：