單擊相同按鈕使用jQuery返回到原始位置

Question

1）我正在創建一個垂直菜單，並且在右上角設置了一個圖像。 用戶可以在單擊正在工作的圖像后更改菜單的寬度，但是我必須單擊同一圖像以返回到同一位置。

2）菜單在小位置時如何更改菜單圖像的尺寸？

請檢查代碼段輸出。 如果單擊菜單欄圖像，則垂直菜單的大小會發生變化，並且我必須單擊同一菜單欄以返回到相同位置。

您能幫我嗎？

 $(document).ready(function() { // Show hide popover $(".active-dropdown").click(function() { $(this).find(".left-menu-dropdown").slideToggle("fast"); }); }); $(document).ready(function() { $('#slide-left-menu').click(function() { $(".left-menu").animate({ width: '100px' }, 'slow', 'linear', function() { $('.left-menu-list ul li span').remove(); }); }) }); 

 html, body { margin: 0; padding: 0; height: 100%; } .left-menu { background-color: #ff0000; width: 37%; height: 100%; z-index: 4; } .left-menu .inside-left-menu { padding: 20px 15px; } .left-menu .left-menu-logo img { width: 50px; } .left-menu .left-menu-logo-text { width: 100px; display: inline-block; color: #000; vertical-align: middle; } .left-menu .left-menu-logo h2 { /* display: inline-block;*/ font-size: 24px; text-align: right; } .left-menu .left-menu-logo h3 { font-size: 12px; text-align: right; margin: 0; } .left-menu .left-menu-logo h2 span, .left-menu .left-menu-logo h3 span { font-family: 'Lato', sans-serif; font-weight: 700; } .left-menu .left-menu-list { margin-top: 30px; } .left-menu .left-menu-list ul.left-menu-main-list { list-style: none; margin: 0; padding: 0; } .left-menu .left-menu-list ul.left-menu-main-list li { padding: 10px 0; } .left-menu .left-menu-list ul.left-menu-main-list li.menu-top-border { content: ""; border-top: 1px solid #000; margin-top: 20px; } .left-menu .left-menu-list ul.left-menu-main-list li a { color: #000; font-size: 13px; display: block; } .left-menu .left-menu-list ul.left-menu-main-list li a img { width: 20px; margin-right: 05px; } .left-menu .left-menu-list ul.left-menu-main-list li a span { vertical-align: middle; margin-left: 03px; } /*drop down*/ .left-menu .left-menu-list ul.left-menu-dropdown { list-style: none; display: none; } .minimize-left-menu { position: relative; } .minimize-left-menu img { width: 75px; position: absolute; right: -50px; top: 0; cursor: pointer; } 

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <div class="left-menu"> <div class="minimize-left-menu"> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/66344-200.png" id="slide-left-menu"> </div> <div class="inside-left-menu"> <div class="left-menu-logo"> <img src="http://www.newgeography.com/files/imagecache/Chart_Story_Inset/bigstock-happy-smiley-25475741.jpg"> <div class="left-menu-logo-text"> <h2><span>Logo</span>name</h2> <h3>by <span>slogan</span></h3> </div> </div> <!--left-menu-logo--> <div class="left-menu-list"> <ul class="left-menu-main-list"> <li> <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 1</span></a> </li> <li class="active-dropdown"> <a href="JavaScript:void(0);"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2</span></a> <ul class="left-menu-dropdown"> <li> <a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/1</span></a> </li> <li> <a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/2</span></a> </li> </ul> </li> <li> <a href=""><img src="https://image.flaticon.com/icons/png/128/61/61391.png"><span>Example 3</span></a> </li> <li class="menu-top-border"> <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 4</span></a> </li> <li> <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 5</span></a> </li> </ul> </div> </div> <!--inside-left-menu--> </div> <!--left-menu--> 

Answer 1

您需要創建另一個函數以將其大小更改為當前沒有的原始大小，也可以僅.hide跨度而不是.remove以便在以后的事件中再次顯示它

 $(document).ready(function() { // Show hide popover $(".active-dropdown").click(function() { $(this).find(".left-menu-dropdown").slideToggle("fast"); }); $('#slide-left-menu').click(function() { $(this).toggleClass('active'); if (!$(this).hasClass('active')) { $(".left-menu").animate({ width: '37%' }, 'slow', 'linear', function() { $('.left-menu-list ul li span').show(); }); } else { $(".left-menu").animate({ width: '100px' }, 'slow', 'linear', function() { $('.left-menu-list ul li span').hide(); }); } }) }); 

 html, body { margin: 0; padding: 0; height: 100%; } .left-menu { background-color: #ff0000; width: 37%; height: 100%; z-index: 4; } .left-menu .inside-left-menu { padding: 20px 15px; } .left-menu .left-menu-logo img { width: 50px; } .left-menu .left-menu-logo-text { width: 100px; display: inline-block; color: #000; vertical-align: middle; } .left-menu .left-menu-logo h2 { /* display: inline-block;*/ font-size: 24px; text-align: right; } .left-menu .left-menu-logo h3 { font-size: 12px; text-align: right; margin: 0; } .left-menu .left-menu-logo h2 span, .left-menu .left-menu-logo h3 span { font-family: 'Lato', sans-serif; font-weight: 700; } .left-menu .left-menu-list { margin-top: 30px; } .left-menu .left-menu-list ul.left-menu-main-list { list-style: none; margin: 0; padding: 0; } .left-menu .left-menu-list ul.left-menu-main-list li { padding: 10px 0; } .left-menu .left-menu-list ul.left-menu-main-list li.menu-top-border { content: ""; border-top: 1px solid #000; margin-top: 20px; } .left-menu .left-menu-list ul.left-menu-main-list li a { color: #000; font-size: 13px; display: block; } .left-menu .left-menu-list ul.left-menu-main-list li a img { width: 20px; margin-right: 05px; } .left-menu .left-menu-list ul.left-menu-main-list li a span { vertical-align: middle; margin-left: 03px; } /*drop down*/ .left-menu .left-menu-list ul.left-menu-dropdown { list-style: none; display: none; } .minimize-left-menu { position: relative; } .minimize-left-menu img { width: 75px; position: absolute; right: -50px; top: 0; cursor: pointer; } 

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <div class="left-menu"> <div class="minimize-left-menu"> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/66344-200.png" id="slide-left-menu"> </div> <div class="inside-left-menu"> <div class="left-menu-logo"> <img src="http://www.newgeography.com/files/imagecache/Chart_Story_Inset/bigstock-happy-smiley-25475741.jpg"> <div class="left-menu-logo-text"> <h2><span>Logo</span>name</h2> <h3>by <span>slogan</span></h3> </div> </div> <!--left-menu-logo--> <div class="left-menu-list"> <ul class="left-menu-main-list"> <li> <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 1</span></a> </li> <li class="active-dropdown"> <a href="JavaScript:void(0);"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2</span></a> <ul class="left-menu-dropdown"> <li> <a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/1</span></a> </li> <li> <a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/2</span></a> </li> </ul> </li> <li> <a href=""><img src="https://image.flaticon.com/icons/png/128/61/61391.png"><span>Example 3</span></a> </li> <li class="menu-top-border"> <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 4</span></a> </li> <li> <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 5</span></a> </li> </ul> </div> </div> <!--inside-left-menu--> </div> <!--left-menu--> 

Answer 2

這是一個工作示例：

  $(document).ready(function() { // Show hide popover $(".active-dropdown").click(function() { $(this).find(".left-menu-dropdown").slideToggle("fast"); }); $('#slide-left-menu').click(function() { // Define the width with the class // Note: you could also use the class itself to define // the width // You can set the values you want let width = $(".left-menu").hasClass('closed') ? '37%' : '100px' ; // The method to hide or show text // (notice: 'hide' is better than 'remove' let methVisi = $(".left-menu").hasClass('closed') ? 'show' : 'hide' ; $(".left-menu").animate({ // Either 100px -> 37%, or 37% -> 100px width: width }, 'slow', 'linear', function() { $('.left-menu-list ul li span')[methVisi](); }); // To add or remove the 'closed' class to the menu let method = $(".left-menu").hasClass('closed') ? 'removeClass' : 'addClass' $(".left-menu")[method]('closed'); }) }); 

  html, body {margin: 0;padding: 0;height: 100%;} .left-menu {background-color: #ff0000;width: 37%;height: 100%;z-index: 4;} .left-menu .inside-left-menu {padding: 20px 15px;} .left-menu .left-menu-logo img {width: 50px;} .left-menu .left-menu-logo-text {width: 100px;display: inline-block;color: #000;vertical-align: middle;} .left-menu .left-menu-logo h2 {/* display: inline-block;*/font-size: 24px;text-align: right;} .left-menu .left-menu-logo h3 {font-size: 12px;text-align: right;margin: 0;} .left-menu .left-menu-logo h2 span,.left-menu .left-menu-logo h3 span {font-family: 'Lato', sans-serif;font-weight: 700;} .left-menu .left-menu-list {margin-top: 30px;} .left-menu .left-menu-list ul.left-menu-main-list {list-style: none;margin: 0;padding: 0;} .left-menu .left-menu-list ul.left-menu-main-list li {padding: 10px 0;} .left-menu .left-menu-list ul.left-menu-main-list li.menu-top-border {content: "";border-top: 1px solid #000;margin-top: 20px;} .left-menu .left-menu-list ul.left-menu-main-list li a {color: #000;font-size: 13px;display: block;} .left-menu .left-menu-list ul.left-menu-main-list li a img {width: 20px;margin-right: 05px;} .left-menu .left-menu-list ul.left-menu-main-list li a span {vertical-align: middle;margin-left: 03px;} .left-menu .left-menu-list ul.left-menu-dropdown {list-style: none;display: none;} .minimize-left-menu {position: relative;} .minimize-left-menu img {width: 75px;position: absolute;right: -50px;top: 0;cursor: pointer;} /* HERE TO CHANGE THE ICONE SIZE */ .left-menu.closed img { width: 40px; transition: width 0.8s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left-menu"><div class="minimize-left-menu"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/66344-200.png" id="slide-left-menu"></div><div class="inside-left-menu"> <div class="left-menu-logo"><img src="http://www.newgeography.com/files/imagecache/Chart_Story_Inset/bigstock-happy-smiley-25475741.jpg"><div class="left-menu-logo-text"<h2><span>Logo</span>name</h2><h3>by <span>slogan</span></h3></div></div> <div class="left-menu-list"> <ul class="left-menu-main-list"> <li><a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 1</span></a></li> <li class="active-dropdown"><a href="JavaScript:void(0);"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2</span></a><ul class="left-menu-dropdown"> <li><a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/1</span></a></li> <li><a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/2</span></a></li></ul></li> <li><a href=""><img src="https://image.flaticon.com/icons/png/128/61/61391.png"><span>Example 3</span></a></li> <li class="menu-top-border"><a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 4</span></a></li> <li><a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 5</span></a></li> </ul></div></div></div> 

Answer 3

最簡單的方法是使用jQuery在菜單上添加一個活動類。

單擊圖像時，應使用單擊功能來打開或關閉活動類。

像這樣

$(document).ready(function() {
    $("img#slide-left-menu").click(function(){
    $(".left-menu").toggleClass("active");
  });
});

https://jsfiddle.net/dmz9gqxL/1

Answer 4

請嘗試以下。 您可以使用變量來記住菜單的狀態和菜單的原始寬度。

 $(document).ready(function() { // Show hide popover $(".active-dropdown").click(function() { $(this).find(".left-menu-dropdown").slideToggle("fast"); }); }); $(document).ready(function() { var menuState = true; var menuWidth = null $('#slide-left-menu').click(function() { if(menuWidth === null) { menuWidth = $(".left-menu").width(); } if(menuState) { $(".left-menu").animate({ width: '100px' }, 'slow', 'linear', function() { $('.left-menu-list ul li span').remove(); menuState = false; }); } else { $(".left-menu").animate({ width: menuWidth + 'px' }, 'slow', 'linear', function() { $('.left-menu-list ul li span').remove(); menuState = true; }); } }) }); 

 html, body { margin: 0; padding: 0; height: 100%; } .left-menu { background-color: #ff0000; width: 37%; height: 100%; z-index: 4; } .left-menu .inside-left-menu { padding: 20px 15px; } .left-menu .left-menu-logo img { width: 50px; } .left-menu .left-menu-logo-text { width: 100px; display: inline-block; color: #000; vertical-align: middle; } .left-menu .left-menu-logo h2 { /* display: inline-block;*/ font-size: 24px; text-align: right; } .left-menu .left-menu-logo h3 { font-size: 12px; text-align: right; margin: 0; } .left-menu .left-menu-logo h2 span, .left-menu .left-menu-logo h3 span { font-family: 'Lato', sans-serif; font-weight: 700; } .left-menu .left-menu-list { margin-top: 30px; } .left-menu .left-menu-list ul.left-menu-main-list { list-style: none; margin: 0; padding: 0; } .left-menu .left-menu-list ul.left-menu-main-list li { padding: 10px 0; } .left-menu .left-menu-list ul.left-menu-main-list li.menu-top-border { content: ""; border-top: 1px solid #000; margin-top: 20px; } .left-menu .left-menu-list ul.left-menu-main-list li a { color: #000; font-size: 13px; display: block; } .left-menu .left-menu-list ul.left-menu-main-list li a img { width: 20px; margin-right: 05px; } .left-menu .left-menu-list ul.left-menu-main-list li a span { vertical-align: middle; margin-left: 03px; } /*drop down*/ .left-menu .left-menu-list ul.left-menu-dropdown { list-style: none; display: none; } .minimize-left-menu { position: relative; } .minimize-left-menu img { width: 75px; position: absolute; right: -50px; top: 0; cursor: pointer; } 

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <div class="left-menu"> <div class="minimize-left-menu"> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/66344-200.png" id="slide-left-menu"> </div> <div class="inside-left-menu"> <div class="left-menu-logo"> <img src="http://www.newgeography.com/files/imagecache/Chart_Story_Inset/bigstock-happy-smiley-25475741.jpg"> <div class="left-menu-logo-text"> <h2><span>Logo</span>name</h2> <h3>by <span>slogan</span></h3> </div> </div> <!--left-menu-logo--> <div class="left-menu-list"> <ul class="left-menu-main-list"> <li> <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 1</span></a> </li> <li class="active-dropdown"> <a href="JavaScript:void(0);"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2</span></a> <ul class="left-menu-dropdown"> <li> <a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/1</span></a> </li> <li> <a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/2</span></a> </li> </ul> </li> <li> <a href=""><img src="https://image.flaticon.com/icons/png/128/61/61391.png"><span>Example 3</span></a> </li> <li class="menu-top-border"> <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 4</span></a> </li> <li> <a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 5</span></a> </li> </ul> </div> </div> <!--inside-left-menu--> </div> <!--left-menu--> 

Answer 5

您可以使用一個臨時類，例如open來記住菜單的情況：

 $('#slide-left-menu').click(function() {

   if ($(".left-menu").hasClass("open"){
        $(".left-menu").removeClass("open");
        $(".left-menu").animate({width: '50px'}, 'slow', 'linear'); //and your extra callback codes
  }

   else {
    $(".left-menu").addClass("open");
    $(".left-menu").animate({width: '100px'}, 'slow', 'linear');
   }

});

也不要使用remove()來臨時隱藏元素。 使用hide()代替。

Answer 6

受到@ user3416331啟發的另一種解決方案，但具有所有要求（甚至更多）：

• 更改菜單寬度
• 更改徽標大小
• 隱藏菜單項
• 和+：減小“商標名”的寬度以適應新的寬度

（只需將“名稱”放在span標記中）

  $(document).ready(function() { $(".active-dropdown").click(function() { $(this).find(".left-menu-dropdown").slideToggle("fast"); }); $('#slide-left-menu').click(function() { $('.left-menu').toggleClass('collapsed'); }) }); 

  html,body {margin: 0;padding: 0;height: 100%;}.left-menu {background-color: #ff0000;height: 100%;z-index: 4;} .left-menu .inside-left-menu {padding: 20px 15px;} .left-menu .left-menu-logo-text {width: 100px;display: inline-block;color: #000;vertical-align: middle;} .left-menu .left-menu-logo h2 span,.left-menu .left-menu-logo h3 span {font-family: 'Lato', sans-serif;font-weight: 700;} .left-menu .left-menu-list {margin-top: 30px;} .left-menu .left-menu-list ul.left-menu-main-list {list-style: none;margin: 0;padding: 0;} .left-menu .left-menu-list ul.left-menu-main-list li {padding: 10px 0;} .left-menu .left-menu-list ul.left-menu-main-list li.menu-top-border {content: "";border-top: 1px solid #000;margin-top: 20px;} .left-menu .left-menu-list ul.left-menu-main-list li a {color: #000;font-size: 13px;display: block;} .left-menu .left-menu-list ul.left-menu-main-list li a img {width: 20px;margin-right: 05px;} .left-menu .left-menu-list ul.left-menu-main-list li a span {vertical-align: middle;margin-left: 03px;} .left-menu .left-menu-list ul.left-menu-dropdown {list-style: none;display: none;} .minimize-left-menu {position: relative;} .minimize-left-menu img {width: 75px;position: absolute;right: -50px;top: 0;cursor: pointer;} /* ======== TAKE A LOOK HERE ============= */ .left-menu:not(.collapsed) .left-menu-logo h2 { font-size: 24px; text-align: right; } .left-menu:not(.collapsed) .left-menu-logo h3 { font-size: 12px; text-align: right; margin: 0; } .left-menu { width: 37%!important; transition: .8s!important; } .left-menu .left-menu-logo img { width: 50px; transition: .8s; } .left-menu.collapsed .left-menu-logo img { width: 35px; transition: .8s; } .left-menu.collapsed { width: 100px!important ; transition: .8s!important; } .left-menu.collapsed .left-menu-list ul li span { opacity: 0; transition: .8s; } .left-menu.collapsed .left-menu-logo-text span { font-size: 0.6em; transition: .8s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left-menu"><div class="minimize-left-menu"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/66344-200.png" id="slide-left-menu"></div> <div class="inside-left-menu"><div class="left-menu-logo"><img src="http://www.newgeography.com/files/imagecache/Chart_Story_Inset/bigstock-happy-smiley-25475741.jpg"><div class="left-menu-logo-text"><h2><span>Logo</span><span>name</span></h2><h3>by <span>slogan</span></h3></div></div> <div class="left-menu-list"><ul class="left-menu-main-list"><li><a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 1</span></a></li><li class="active-dropdown"><a href="JavaScript:void(0);"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2</span></a><ul class="left-menu-dropdown"><li><a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/1</span></a></li><li><a href=""><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30440-200.png"><span>Example 2/2</span></a></li></ul></li><li><a href=""><img src="https://image.flaticon.com/icons/png/128/61/61391.png"><span>Example 3</span></a></li><li class="menu-top-border"><a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 4</span></a></li><li><a href=""><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png"><span>Example 5</span></a></li></ul></div></div></div>