如何显示菜单(从左侧)并在按钮单击时消失

时间:2016-01-29 10:36:17

标签: javascript jquery

我创建了一个按钮和一个列表视图菜单,我希望它在按钮点击按钮下方从左到右切换 - 它应该出现并消失。请帮忙。谢谢。

$('#menu').click(function () {
    if ($('#pageone').is(':visible')){
        $('#pageone').fadeOut();
    } else {
        $('#pageone').toggle('slide', {
            direction: 'left'
        }, 1000, function(){ 
            $('#pageone').fadeIn();
        });
    }
});

1 个答案:

答案 0 :(得分:3)



CREATE TABLE IF NOT EXISTS `Tickets` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL,
  `email` varchar(50) NOT NULL,
  `ticket_id` varchar(30) NOT NULL,
  `ticket_question` varchar(255) NOT NULL,
  `ticket_status` tinyint(1) NOT NULL DEFAULT '0',
  `ticket_creation_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
  PRIMARY KEY (`ticket_id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=203 ;

CREATE TABLE IF NOT EXISTS `Conversation` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `ticket_id` varchar(30) NOT NULL,
  `ticket_comment` varchar(255) NOT NULL,
  `ticket_latest_reply` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
  PRIMARY KEY (`ticket_id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=203 ;

var isOpen =true;
function toggleMenu(){
 
  if(isOpen){
    $('#pageone').hide('slow');
    isOpen = false;
    }else{
       $('#pageone').show('slow');
       isOpen = true;
      }
    
    
}

#top
{
  clear:both;
  position:fixed;
  top:0;
  height:40%;
  width:100%;
  background-color:#DCDCDC;
  text-align:center;
}
#bottom
{
   clear:both;
   position:fixed;
   bottom:0;
   height:60%;
   width:100%;
   background-color:#ffc878;
   text-align:center;
}
#menu
{
   position:fixed;
   left:2%;
}