Jquery移动显示/隐藏div

时间:2012-07-17 16:15:07

标签: jquery-mobile

我有一个jquery移动页面,其中包含一个按钮,在点击时应显示/隐藏div。我似乎错过了一些东西。我在SO上遇到过类似的问题没有成功,有人能说出我哪里出错了吗?

HTML:

<a href="#" id="moreFilters" class="moreFilters" data-role="button">View more filters</a>
<div id="filters"> Blah </div>

CSS:

div#filters {
    display: none;
}

JQ:

$('#myPage').live('pageinit', function(event) {
    $("#moreFilters").bind('tap',function(event, ui){
        $('#filters').toggle('fast', function() {});
    })
});

我也试过了:

$('#moreFilters').live('tap',function(event) {
    $("#filters").toggle(); //  toggles the visibility/display of the element.
});

有人能指出我正确的方向吗?

非常感谢提前

1 个答案:

答案 0 :(得分:0)

你可以做这样的事吗,

<script>
    var isMenuVisible = true

    function showHideMenu() {
        isMenuVisible = !isMenuVisible;
        var menuPrin= document.getElementById("divMenu");

        if(isMenuVisible) {
            menuPrin.style.visibility = "visible";
            menuPrin.style.width = "30%";
        } else {
            menuPrin.style.visibility = "hidden";
            menuPrin.style.width = "0%";
        }
    }
</script>

这个script可以把它放在页面的末尾。

现在,将id="divMenu"指向要在触发事件的元素上隐藏,确定和div功能的onclick="showHideMenu();"

所有这些都模拟了taptoggle事件。

我希望这会有所帮助。 :)