谷歌地图中损坏的jQuery手风琴

谷歌地图中损坏的jQuery手风琴,jquery,google-maps-api-3,jquery-ui-accordion,Jquery,Google Maps Api 3,Jquery Ui Accordion,我试图在谷歌地图的内部显示一个jQuery手风琴,但当我从我的手风琴菜单中单击时,它不会在我重新打开它时充当手风琴。我不知道如何在不从头开始创作自己的手风琴的情况下修复它。关于如何使它正常工作有什么帮助吗 您还需要使用事件再次创建这些元素 我使用jQuery改进了您的代码,请尝试以下操作: function HomeControl(controlDiv, map) { var menu_btn = $("<div>"); menu_btn.attr('id', 'me

我试图在谷歌地图的内部显示一个jQuery手风琴,但当我从我的手风琴菜单中单击时,它不会在我重新打开它时充当手风琴。我不知道如何在不从头开始创作自己的手风琴的情况下修复它。关于如何使它正常工作有什么帮助吗


您还需要使用事件再次创建这些元素

我使用
jQuery
改进了您的代码,请尝试以下操作:

function HomeControl(controlDiv, map) {
    var menu_btn = $("<div>");
    menu_btn.attr('id', 'menu_btn');
    menu_btn.attr('title', 'Click to show the Map Navigation');
    menu_btn.html('<b>Menu</b>');
    menu_btn.css({
        backgroundColor: 'white',
        cursor: 'pointer',
        textAlign: 'center',
    });

    $(menu_btn).click(function() {
        $(controlDiv).empty();

        menu_state = 1;

        var menu_nav = $("<div>");
        menu_nav.attr('id', 'menu_nav');
        menu_nav.attr('title', 'Click Map to close Menu');
        menu_nav.css({
            backgroundColor: 'white',
            cursor: 'pointer',
            textAlign: 'center',
        });

        var accordion = $('<div id="accordion"><h3><a href="#">Change Library</a></h3> <div>Ellis<br>Engineering<br>Journalism</div><h3><a href="#">Change Floor</a></h3> <div>Ground Floor<br>First Floor<br>Second Floor<br>Third Floor<br>Fourth Floor<br></div> <h3><a href="#">Change Map</a></h3> <div>Virtual Tour<br>Video Tour<br>Study Rooms<br>Computers</div></div>');

        $(menu_nav).append(accordion);
        $(controlDiv).append(menu_nav);

        $(accordion).accordion({active: 1, autoHeight: false});
    });

    $(controlDiv).empty();
    $(controlDiv).append($(menu_btn).clone(true));

    google.maps.event.addDomListener(map, 'click', function() {
        menu_state = 0;

        $(controlDiv).empty();
        $(controlDiv).append($(menu_btn).clone(true));
    });
}
功能HomeControl(controlDiv,map){
变量菜单_btn=$(“”);
菜单属性(“id”、“菜单属性”);
菜单属性(“标题”,“单击以显示地图导航”);
menu_btn.html('menu');
菜单_btn.css({
背景颜色:“白色”,
光标:“指针”,
textAlign:'中心',
});
$(菜单)。单击(函数(){
$(controlDiv.empty();
菜单_状态=1;
变量菜单_nav=$(“”);
菜单导航属性(“id”、“菜单导航”);
菜单导航属性(“标题”,“单击地图关闭菜单”);
菜单_nav.css({
背景颜色:“白色”,
光标:“指针”,
textAlign:'中心',
});
var accordion=$('Ellis
工程
新闻一楼
二楼
三楼
四楼
虚拟旅游
视频旅游
自修室
电脑”); $(菜单导航).附加(手风琴); $(controlDiv).append(菜单导航); $(accordion).accordion({active:1,autoHeight:false}); }); $(controlDiv.empty(); $(controlDiv).append($(menu_btn).clone(true)); google.maps.event.addDomListener(映射,'click',函数(){ 菜单_状态=0; $(controlDiv.empty(); $(controlDiv).append($(menu_btn).clone(true)); }); }

希望这能有所帮助。

谢谢,这解决了我在以不同方式使用autoHeight后遇到的其他问题。不过,我遇到的另一个问题是autoHeight不起作用(高度应保持不变)手风琴被放在菜单按钮的下面,而不是放在菜单按钮上top@Raymond这是因为
h3
标记的边距。您可以使用CSS删除此页边距。