如何使菜单出现(从左侧开始）并在单击按钮时消失

How to make a menu appear (from the left) and disappear on button click

本文关键字：单击 按钮 消失 开始 菜单 何使      更新时间：2023-09-26

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

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


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%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="top">
    <h2>Knowledge Point</h2>
    <h2>Self Test</h2>
    <input type="submit" value="Submit" name="submit" class="btn btn-success">
    <button id="menu" onclick="toggleMenu()">☰</button>
</div>
<div id="bottom">
<div data-role="page" id="pageone" style="float:left;width :30%;">
  <div data-role="main" class="ui-content">
    <ul data-role="listview" data-inset="true">
      <li data-icon="plus"><a href="question.html">Add a new question</a></li>
    </ul>
  </div>
</div> 
<div id="question" style="float:right; width:70%;">
Testing Content
<br>
</div>
</div>

相关文章：