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

}

jquery导航中的按钮冲突

1 个答案: