-1

我的网站上有一些用于弹出菜单的代码，该菜单应在单击按钮时出现和消失，我在调试 HTML 和 JQuery 方面非常糟糕，是否有人能够找到为什么它不会弹出和弹出?

<!DOCTYPE html>

在顶部

<script>
$('#trigger').click( function() {
    if ($('#popout').hasClass('hidden')) {
        $('#popout').removeClass('hidden');
        showPopout();
    }
    else {
        $('#popout').addClass('hidden');
        hidePopout();
    }
});
function showPopout() {
    $('#popout').animate({
        left: 200
    }, 'slow', function () {
        $('#trigger span').html('Close');  //change the trigger text at end of animation
    });
}
function hidePopout() {
    $('#popout').animate({
        left: -200
    }, 'slow', function () {
        $('#trigger span').html('Show');  //change the trigger text at end of animation
    });
}

</script>

在身体里

<div id="popout" style="float:left;width:200px;">
    <div id="nav-border-top">
        <div id="nav-border-bottom">
            <div class="container" style="width:200px;">
                <table>
                    <tr>
                    </tr>
                </table>
                <table width="100%" cellpadding="3" cellspacing="3">

                    <tr id="nav1">
                        <a href="BLANKED">Home<br></a>
                    </tr>

                    <tr id="nav2">
                        <a href="BLANKED">Forum<br></a>
                    </tr>

                    <tr id="nav3">
                        <a href="BLANKED">Blog<br></a>
                    </tr>

                    <tr id="nav3a">
                        <a href="BLANKED">> Photos Of BLANKED<br></a>
                    </tr>

                </table>
            </div><!-- end container -->
        </div><!-- end nav-border-bottom -->
    </div><!-- end nav-border-top -->
</div><!-- end nav-wrap -->

还

<span id="trigger" style ="position:fixed;left:0;bottom:0;color:#d3222d;background-color:rgba(0,0,0,0.2);width:50px;height:25px;">
    Menu
</span>

CSS

 #popout {
    position: fixed;                /* fix the popout to the left side of the screen */
    top: 50px;
    left: -200px;                    /* use a negative margin to pull the icon area of the popout off the edge of the page */
    width: 75px;
    border: 1px dotted gray;
    color: gray;
}
#trigger {                          /* create a clickable area that triggers the slide in/out effect */
    position: absolute;             /* position clickable area to consume entire right section of popout (add a border if you want to see for yourself) */  
    top: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;   
}
4

2 回答 2

0

您可以使用这样的东西来代替这个长脚本：

$(document).ready(function(){
    $('#trigger').click( function() {

        $("#popout").slideToggle();
    });
});

小提琴：http: //jsfiddle.net/sajaycv/SUzJg/

于 2013-06-01T16:45:08.533 回答
0

您说您在顶部包含了您的脚本，但不要将您的事件绑定包装在准备好的 DOM 中。

这就是问题所在，您要在不存在的元素上添加事件。

尝试这个 ：

$(document).ready(function(){
    $('#trigger').click( function() {
        if ($('#popout').hasClass('hidden')) showPopout();
        else hidePopout();
        $('#popout').toggleClass('hidden');
    });
});
function showPopout() {
    $('#popout').animate({
        left: 200
    }, 'slow', function () {
        $('#trigger span').html('Close');  //change the trigger text at end of animation
    });
}
function hidePopout() {
    $('#popout').animate({
         left: -200
    }, 'slow', function () {
        $('#trigger span').html('Show');  //change the trigger text at end of animation
    });
}
于 2013-06-01T16:50:53.413 回答