使用jQuery创建响应式表格菜单

Question

我正在尝试制作响应式菜单。一旦此菜单展开，带有容器类的div将缩小以为此菜单腾出空间。截至目前，菜单将打开，但一旦再次单击其中一个按钮，菜单就不会关闭。是否有任何jQuery选择器，以便在单击此菜单外的任何位置时，或者当其中一个＆＃34; -btn＆＃34;单击类，容器div将返回到它的原始大小？

HTML

<nav>
    <a href="#" id="company-information-btn">
        <i class="fa fa-info-circle"></i>
        <p>Company Information</p>
    </a>
    <hr>
    <a href="#" id="faq-btn">
        <i class="fa fa-question-circle"></i>
        <p>FAQ</p>
    </a>
    <hr>
    <a href="#" id="personalize-btn">
        <i class="fa fa-magic"></i>
        <p>Personalize</p>
    </a>
    <hr>
    <a href="#" id="services-btn">
        <i class="fa fa-gift"></i>
        <p>Services</p>
    </a>
    <hr>
    <a href="#" id="portfolio-btn">
      <i class="fa fa-desktop"></i>
      <p>Portfolio</p>
    </a>
    <hr>
    <a href="#" id="contact-btn">
      <i class="fa fa-envelope-o"></i>
      <p>Contact Information</p>
    </a>
    <hr>
    <a href="#" id="testimonials-btn">
      <i class="fa fa-users"></i>
      <p>Testimonials</p>
    </a>
</nav>

<div class="content" id="company-information>
...
</div>

<div class="content" id="FAQ">
...
</div>

等...

的jQuery

$('.profile-create_nav nav a').click(function(event) {
    event.preventDefault();

    // $('.profile-create_nav nav a').removeClass('active');
    // $(this).addClass('active');
    $('.container').addClass('smaller');
    $('.profile-create_nav .content').fadeToggle(300);
    $('.profile-create_nav #services').show();
    $('.move_down').hide();
});


//Aside nav for microsite
$('#company-information-btn').click(function() {
    $('.content').addClass('hidden');
    $('#company-information').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#company-information-btn').addClass('active');
});

$('#personalize-btn, #personalize-section-btn').click(function() {
    $('.content').addClass('hidden');
    $('#personalize').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#personalize-btn').addClass('active');
});

$('#faq-btn, #faq-section-btn').click(function() {
    $('.content').addClass('hidden');
    $('#faq-section').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#faq-btn').addClass('active');
});

$('#services-btn, #services-section-btn').click(function() {
    $('.content').addClass('hidden');
    $('#services').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#services-btn').addClass('active');
});

$('#portfolio-btn, #portfolio-section-btn').click(function() {
    $('.content').addClass('hidden');
    $('#portfolio-section').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#portfolio-btn').addClass('active');
});

$('#testimonials-btn, #testimonials-section-btn').click(function() {
    $('.content').addClass('hidden');
    $('#testimonials-section').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#testimonials-btn').addClass('active');
});

$('#contact-btn, #contact-section-btn').click(function() {
    $('.content').addClass('hidden');
    $('#contact-information').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#contact-btn').addClass('active');
});

谢谢，亚当。