Question

http://www.foundersfund.com/ 在此页面上注意，当您单击右上方的菜单按钮时，前一个出现按钮，您可以从中单击该按钮并将菜单重新打开，这样是我想要的，但这是我的网页正在做的，试试看：file：///Users/MacbookPro2011/Desktop/RedWeave/JQuery/redweave.html

here is my code: 

<body>

<div id="mainBar">

<div id="menuButton">

<div id="exButton"></div>

</div>

</div>

<script text="type/javascript">

$("#menuButton").click(function() {

$("#mainBar").animate({ height:"300px" },500);

$("#menuButton").animate({ height:"0px", width:"0px"},5);

$("#exButton").animate({ height:"30px", width:"30px"},5);

});

$("#exButton").click(function() {

$("#mainBar").animate({ height:"100px" },500);

$("#menuButton").animate({ height:"30px", width:"30px"},5);

$("#exButton").animate({ height:"0px", width:"0px"},5);

});
</script>

Answer 1

以下是我创建的一个简单代码段，我认为您可以更轻松地从这里继续自己。

＆＃13;

$("#menuButton").click(function() {
  $("#menuButton").toggleClass("close");
  $(".main-menu").toggleClass("expanded");
  if ($("#mainBar").hasClass("collapsed")) {
    $("#mainBar").animate({
      "height": "400px"
    }, function() {
      $("#mainBar").removeClass("collapsed");
    });
  } else {
    $("#mainBar").animate({
      "height": "80px"
    }, function() {
      $("#mainBar").addClass("collapsed");
    });

  }

});

＆＃13;

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 #menuButton {
  background: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) no-repeat;
  background-size: 100%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  position: absolute;
  top: 24px;
  left: 24px;
}
#menuButton.close {
  background: url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/18_Close-128.png) no-repeat;
  background-size: 100%;
}
#mainBar {
  background: #DDDDDD;
  position: relative;
}
#mainBar.collapsed {
  height: 80px;
}
.menu-header {
  display: table;
  width: 100%;
  height: 100%;
}
ul>li {
  list-style: none;
}
ul.main-menu {
  display: none;
  text-align: center;
  height: 330px;
  vertical-align: middle;
}
ul.main-menu.expanded {
  display: table-cell;
}
ul.main-menu li>a {
  font-size: 21px;
  font-weight: bold;
  color: #000000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="mainBar" class="collapsed">
  <div id="menuButton"></div>
  <div class="menu-header">
    <ul class="main-menu" style="">
      <li><a href="#">Manifesto</a>
      </li>
      <li><a href="#">Portfolio</a>
      </li>
      <li><a href="#">Team</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

我想在点击后删除一个图标

1 个答案: