jquery - jquery 导航中的按钮冲突

Question

我正在开发一个网络应用程序，我必须在标题中添加按钮；分享和选择。单击按钮时，其相关内容会下降，再次单击按钮时会恢复。两个按钮都可以正常工作。但是，如果用户要单击共享按钮然后单击选项按钮而不关闭共享内容，选项的内容将在共享内容下方打开。

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

我对 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;
    });

Answer 1

创建两个单独的函数来隐藏共享和选项内容，然后在单击按钮时调用，以便先隐藏它们。

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

}