jquery导航中的按钮冲突

我正在开发一个web应用程序，我必须在标题中添加按钮；股票和期权。当点击一个按钮时，它的相关内容会下降，当再次点击按钮时，它会恢复。两个按钮都能正常工作。但是，如果用户要单击“共享”按钮，然后单击“选项”按钮而不关闭“共享内容”，则“选项”的内容将在“共享内容”下方打开

我想一次只显示一个按钮的内容。如果用户要在另一个按钮未折叠时单击该按钮，则应先折叠该按钮

我对jquery没有太多经验，也不知道如何修复这个问题

另外，如果你认为我可以以任何方式优化我的代码，我会感谢你的建议

谢谢

  $('.pull_box_share_triger').click(function() {
        if(!collapsed){  
            var h = document.getElementById('share_box').Height;
            $('#share_box').animate({ height : h+'px' });
            $('#share_link_box').css({ display:'inline-block'});
            $(".overlay").css({ display:'block'});
            $(".pull_box_share_triger").css({ background:'#ffffff' });
            $('#share_social_box').css({ display:'inline-block'});
            $('.share_button').css({ display : 'inline-block'});
        } else {
            $('#share_box').animate({height: 'auto'});
            $('#share_link_box').css({ display:'none'});
            $(".overlay").css({ display : 'none'});
            $(".pull_box_share_triger").css({ background:'#f2f2f2'});
            $('#share_social_box').css({ display:'none'});
            $('.share_button').css({ display : 'none' });
        }
        collapsed = !collapsed;
    });

    $('.pull_box_option_triger').click(function() {
        if(!collapsed){ 
            var h = document.getElementById('options_box').Height;
            $('#options_box').animate({ height : h+'px' });
            $(".overlay").css({ display:'block'});
            $(".pull_box_option_triger").css({ background:'#ffffff' });
            $(".options_content").css({ display:'inline-block'});
        } else {
            $('#options_box').animate({height: 'auto'});
            $(".overlay").css({ display : 'none'});
            $(".pull_box_option_triger").css({ background:'#f2f2f2'});
            $(".options_content").css({ display:'none'});
        }
        collapsed = !collapsed;
    });

---

制作两个单独的函数来隐藏共享和期权内容，然后在单击按钮时调用，以便首先隐藏它们

$('.pull_box_share_triger').click(function() {
        hideOption();
        if(!collapsed){  
            var h = document.getElementById('share_box').Height;
            $('#share_box').animate({ height : h+'px' });
            $('#share_link_box').css({ display:'inline-block'});
            $(".overlay").css({ display:'block'});
            $(".pull_box_share_triger").css({ background:'#ffffff' });
            $('#share_social_box').css({ display:'inline-block'});
            $('.share_button').css({ display : 'inline-block'});
        } else {
             hideShare();
        }
        collapsed = !collapsed;
    });

    $('.pull_box_option_triger').click(function() {
hideShare();
        if(!collapsed){ 
            var h = document.getElementById('options_box').Height;
            $('#options_box').animate({ height : h+'px' });
            $(".overlay").css({ display:'block'});
            $(".pull_box_option_triger").css({ background:'#ffffff' });
            $(".options_content").css({ display:'inline-block'});
        } else {
               hideOption();
            }
        collapsed = !collapsed;
    });

   function hideShare()
{
  $('#share_box').animate({height: 'auto'});
            $('#share_link_box').css({ display:'none'});
            $(".overlay").css({ display : 'none'});
            $(".pull_box_share_triger").css({ background:'#f2f2f2'});
            $('#share_social_box').css({ display:'none'});
            $('.share_button').css({ display : 'none' });

}

function hideOption()
{
 $('#options_box').animate({height: 'auto'});
            $(".overlay").css({ display : 'none'});
            $(".pull_box_option_triger").css({ background:'#f2f2f2'});
            $(".options_content").css({ display:'none'});

}

---

你应该做一个jsfiddle