javascript - 显示/隐藏超时事件 - 无法在一定时间后触发点击

Question

我正在尝试以下操作: 有一个显示/隐藏事件，该事件应该在页面加载一秒钟后触发。如果用户点击显示/隐藏图标，则不会自动触发超时功能。

当显示/隐藏 Div 出现时，它会执行以下操作: - 扩大div更大 - 显示隐藏内容 - 更改图标

除了 setTimeOut 之外，我几乎所有的功能都能正常工作。我设法让它在另一个页面上工作，但由于某种原因它在这个页面上不起作用。 更新:超时功能正常工作，但一旦打开，它会立即关闭而不是保持打开状态。

请指教!

这是我目前拥有的代码:

JQuery:

setTimeout(function (f) {
    $('.show_hide_aboutus').click();
}, 1000);
//For About Us Show/hide
$('.show_hide_aboutus').click(function(f){

    f.preventDefault();
    clearTimeout(time); // cancels timeout
    $(".slidingDiv").slideToggle('fast',function() {
        $('.overlayAbout').toggleClass('animate', $(this).is(':visible'));
        if ( $('.animate').is(':visible') ){ // Open
            $('.showhideMenu').animate({ "margin-left": "-13px"}, 'fast');
            $('.showhideMenu').fadeIn('slow');
            $('.showWork').hide();
            $('.aboutContent').fadeIn('slow');
            $('.ourworkContent').fadeIn('slow');
            $('.overlayAbout').animate({ width: '29.5%', height: '100%'}, 'fast');   /*  */
            $('.infoicon').toggleClass('infoicon arrow-left'); /* hides the up arrow */
            $('.arrow-right-down').toggleClass('arrow-right-down arrow-right');    /* hides the up arrow */
        } else { // Close       
            $('.overlayAbout').animate({ width: 69, height: 69}, 'fast');   /*  */
            $('.ourworkContent').hide();
            $('.showWork').show();
            $('.aboutContent').hide();
            $('.arrow-left').toggleClass('arrow-left infoicon'); /* hides the up arrow */
            $('.arrow-right').toggleClass('arrow-right arrow-right-down');    /* hides the up arrow */
            $('.showhideMenu').hide();
        }

    }); /* slidingDiv Toggle */

}); /* show_hide click function */

HTML:

<div class="overlayAbout">
    <a href="#" class="show_hide_aboutus">
        <div class="infoicon"> </div>
        <div class="arrow-right-down"> </div>

        <div class="showWork">
            Back to <br/> <a href="/about-us" id="aboutusLink">about us</a>
        </div> <!--- showWork div link -->
    </a> <!-- show_hide -->
    <div class="slidingDiv">
        <div class="showhideMenu">
            Menu Stuff
        </div>
        <div class="large-9 columns margintop-small aboutContent">
            <div class="scrolling">
                Test setwlewjlj wlerjwlerj
            </div>
        </div>

    </div> <!-- large-9 columns margintop -->
</div> <!--slidingDiv  -->
</div> <!-- overlayAbout -->

CSS:

.slidingDiv { color: #4F4E4E; display: none;}
.overlayAbout{
    position: absolute;
    z-index: 1;
    width: 69px;
    height: 69px;
    background-color: white;
    color: #4F4E4E;
    opacity: 0.8;
    filter:alpha(opacity=95);
    padding: 10px 15px;
    line-height: 20px;
    border: 1px solid #000;
}
.showhideMenu{ display: none; }
.showWork{
    line-height: 15px;
    width: 70px;
    margin: 0px 0 0 -15px;
    text-align: center;
}
.showWork a{ font-size: 9px; color: #334444; line-height:11px; }
.aboutContent{ display: none; }

Answer 1

你的超时函数有错字

$('show_hide_aboutus').click();

应该是

$('.show_hide_aboutus').click();