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

Question

我遇到了两个 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 知识还远远不够好，无法对我的问题进行任何修复。

任何帮助将不胜感激！

Answer 1

您可以查看我的示例：Toggle Buttons show and hide

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