Javascript 如何将此代码从悬停转换为单击或切换

下面的脚本可以很好地使用hover，但如果有人对如何实现这一点有任何想法，则需要将其作为切换或单击功能。 它根据悬停在上面的按钮从不同的php文件中收集数据，这很好，但是当在页面上工作时，它总是弹出，有点烦人

<script type="text/javascript">
        $(document).ready(function(){
            $(".container").hide();
                $(['btn1', 'btn2', 'btn3']).each(function(){
                    var btn = this;
                    var con = $("#"+btn).children('.container');
                        $("#"+btn).hover(
                        function(){
                            $(".hover").mouseout();
                            $(this).addClass('hover');
                            var cache = $(con).children('p');
                    //check to see if content was loaded previously
                            if(cache.size()){
                                con.show();
                            }else{
                                    $(con).show();
                                    $(con).html('<img src="imgs/loader.gif" alt="Loading..." />');
                                    $.ajax({
                                    url: 'data/'+btn+'.php',
                                    type: 'get',
                                    success: function(data){
                                    $(con).html(data);
                                    }
                                    });
                            }
                        },
                    //mouseout
                            function(){
                                if($.browser.msie){
                                $(con).hide();
                                }else{
                                $(con).fadeOut(250);
                                }
                                $(this).removeClass('hover');
                            }
                        );
                });
        });
    </script>






<div id="btn1" class="wrapper">
    <div class="button">
        <p><i class="fa fa-users" aria-hidden="true"></i></p>
    </div>
    <div class="content">
    </div>
</div>

<div id="btn2" class="wrapper">
    <div class="button">
        <p><i  class="fa fa-comments" aria-hidden="true"></i></p>
    </div>
    <div class="content">
    </div>
</div>

$（文档）.ready（函数（）{
$（“.container”）.hide（）；
$（['btn1'，'btn2'，'btn3']）。每个（函数（）{
var btn=此；
var con=$（“#”+btn）.children（'.container'）；
$（“#”+btn）。悬停(
函数（）{
$（“.hover”）.mouseout（）；
$（this.addClass（'hover'）；
var cache=$（con.children（'p'）；
//检查内容之前是否已加载
if（cache.size（））{
con.show（）；
}否则{
$（con.show（）；
$（con.html（“”）；
$.ajax({
url:'data/'+btn+'.php'，
键入：“get”，
成功：功能（数据）{
$（con）.html（数据）；
}
});
}
},
//灭鼠器
函数（）{
如果（$.browser.msie）{
$（con.hide（）；
}否则{
美元（con）.淡出（250）；
}
$（this.removeClass（'hover'）；
}
);
});
});

谢谢各位，我找到了解决方法，同时也减少了编码。 因此，它所做的是创建带有btn1 id的下拉按钮 以及id为btn2的“下一步”按钮。 解析名为btn1.php的php文件可以编写在按钮的content div中显示数据所需的代码

aaaaargh sorry似乎只有第一个按钮可以显示conent div并在单击时关闭，但随后的新按钮显示content div Ajax请求都可以 但再次单击时不要关闭

    <script>
$(".wrapper").click( function()
           {
            var btn =  $(this).attr('id');
            var conte = $('.content').css('display');
            var con = $(this).children('.content');
            if (conte == 'block') {
            $(con).css('display','none');
            } else if (conte == 'none') {
    $(con).css('display','block');
    $(con).html('<img src="imgs/loader.gif" alt="Loading..." />');
            $.ajax({
            url: 'configuration/'+btn+'.php',
            type: 'get',
            success: function(data){
            $(con).html(data);
            }
        });
} 

});                 
    </script>

$（“.wrapper”）。单击（函数（）
{
var btn=$（this.attr（'id'）；
var conte=$（'.content'）.css（'display'）；
var con=$（this.children（'.content'）；
if（conte=='block'）{
$（con.css（'display'，'none'）；
}如果为else（conte=='none'）{
$（con.css（'display'，'block'）；
$（con.html（“”）；
$.ajax({
url:'configuration/'+btn+'.php'，
键入：“get”，
成功：功能（数据）{
$（con）.html（数据）；
}
});
} 
});                 

请在代码下方显示HTML.HTML