Question

下面的脚本可以正常悬停，但如果有人对如何实现这一点有任何想法，则需要将其作为切换或点击功能。它收集来自不同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>

Answer 1

谢谢大家，我想出了如何做到这一点，也减少了编码。所以它的作用是你用btn1 id创建下拉按钮以及id为btn2的下一个按钮。解析php文件名为btn1.php，你可以在显示按钮内容div中的数据所需的代码

Aaaargh对不起似乎只有第一个按钮工作显示了conent div并在点击时关闭但后续的新按钮显示内容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>

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

1 个答案: