我正在尝试以下操作:有一个显示/隐藏事件,该事件应该在页面加载后一秒钟后触发。如果用户点击显示/隐藏图标,那么它不会自动触发超时功能。
当显示/隐藏 div 出现时,它会执行以下操作: - 将 div 扩展为更大 - 显示隐藏的内容 - 更改图标
我几乎所有的功能都在工作,除了 setTimeOut 工作。我设法让它在另一个页面上工作,但由于某种原因它在这个页面上不起作用。更新:超时功能正常工作,但一旦打开,它会立即关闭而不是保持打开状态。
请指教!
这是我目前拥有的代码:
查询:
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; }