0

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

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

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

1 回答 1

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

}
于 2013-06-28T17:26:43.087 回答