我想讓一個圖標出現在點擊後刪除的圖標上

http://www.foundersfund.com/ 請注意，當您點擊右上角的菜單按鈕時，會出現一個ex 按鈕，您可以點擊該按鈕並將菜單返回起來，這是我想要的，但是這是我的網頁是幹什麼的，嘗試一下：文件：///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>

來源

2015-02-08 chris777

這裏是一個我創建的簡單片段，我認爲你自己從這裏繼續前進會更容易。

$("#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"); 
 
    }); 
 

 
    } 
 

 
});

@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; 
 
}

<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>

來源

2015-02-08 18:03:29

我想讓一個圖標出現在點擊後刪除的圖標上

回答

相關問題