當點擊菜單上，它會打開，當再次點擊關閉

我有非常基本的：當點擊菜單上，它會打開，當再次點擊關閉

 // jQuery Document 
    var main = function() { 
    /* Push the body and the nav over by 285px over */ 
    $('#share').click(function() { 
    $('.menu').animate({ 
     right: "0px" 
    }, 200); 

    $('body').animate({ 
     right: "285px" 
    }, 200); 
    }); 

    /* Then push them back */ 
    $('html').click(function() { 
    $('.menu').animate({ 
     right: "-285px" 
    }, 200); 

    $('body').animate({ 
     right: "0px" 
    }, 200); 
    }); 
}; 


$(document).ready(main);

而且，我想要做這樣的事情。如果在菜單圖標，用戶點擊（#share）菜單將出現，如果菜單是可見的，並且用戶再次點擊，它將消失。如何簡單地做到這一點？我想盡可能簡單...請幫助我:)

而且是的...我寫了類似html的東西。點擊..然後關閉菜單..應該有菜單圖標的名稱（#share）

有菜單的CSS：

.menu { 
    background-color: #373737; 
    right: -285px; 
    height: 100%; 
    position: fixed; 
    width: 285px; 
}

和HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Minecraft</title> 
     <link href="styles_m.css" rel="stylesheet" type="text/css"> 

    </head 


    <body> 
    <div class="menu"> 

    </div> 

     <div id="header"> 
     <div id="main"> 
      <a href="minecraft.html"><img src="my_logo.png"></a> 
     </div> 
     <div id="share"> 
      <img name="menu" src="my_menu.png"> 
     </div> 
     </div> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     <script type="text/javascript" src="main.js"> 

     </script> 
    </body 
</html>

來源

2015-09-26 David Stančík

添加HTML也或創建一個jsfiddle演示 – Tushar

kk，我會做 –

@PetrCihlar查看我的答案老闆...不使用太多變量... –

只需使用fadeToggle()：

$(function() { 
 
    $(".showMenu").click(function() { 
 
    $(this).next(".menu").fadeToggle(400); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button class="showMenu">Show Menu</button> 
 
<div class="menu" style="display: none;"> 
 
    <ul> 
 
    <li>Menu 1</li> 
 
    <li>Menu 2</li> 
 
    <li>Menu 3</li> 
 
    </ul> 
 
</div>

或者，如果你想使它向右滑動，您可以用動畫：

只需使用animate()：

$(function() { 
 
    $(".showMenu").click(function() { 
 
    if ($(this).next(".menu").css("left") != "0px") 
 
     $(this).next(".menu").animate({ 
 
     left: 0 
 
     }, 1000); 
 
    else 
 
     $(this).next(".menu").animate({ 
 
     left: -250 
 
     }, 1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button class="showMenu">Show Menu</button> 
 
<div class="menu" style="position: relative; left: -250px;"> 
 
    <ul> 
 
    <li>Menu 1</li> 
 
    <li>Menu 2</li> 
 
    <li>Menu 3</li> 
 
    </ul> 
 
</div>

來源

2015-09-26 17:31:58

HTML 5數據標籤可以是解決方案。看看我的小提琴

$('.showMenu').click(function() { 
 
    var active = $('.menu').data('active'); 
 
    
 
    if(active === 'N') { 
 
    $('.showMenu').html('Hide Menu'); 
 
    $('.menu').fadeIn(100); 
 
    $('.menu').data('active', 'Y'); 
 
    } else { 
 
    $('.showMenu').html('Show Menu'); 
 
    $('.menu').fadeOut(100); 
 
    $('.menu').data('active', 'N'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<button class="showMenu">Show Menu</button> 
 
<div class="menu" data-active="N" style="display: none;"> 
 
    <ul> 
 
    <li>Menu 1</li> 
 
    <li>Menu 2</li> 
 
    <li>Menu 3</li> 
 
    </ul> 
 
</div>

來源

2015-09-26 17:30:04 IlGala

你也可以使用一個變量的控制，知道什麼時候可以顯示/隱藏元素（jsFiddle）：

var control = false; 
var main = function() { 
    $('#share').click(function() { 
     if(control === true){ 
      $('.menu').animate({ 
       right: "-285px" 
      }, 200); 

      $('body').animate({ 
       right: "0px" 
      }, 200); 
      control = false; 
      return; 
     } 
     control = true; 
     $('.menu').animate({ right: "0px" }, 200); 
     $('body').animate({ right: "285px" }, 200); 
    }); 
};

來源

2015-09-26 17:31:04 kosmos

是啊，我的東西你有最好的答案...它的簡單和做得很好...非常感謝... :) –

但是，當我點擊圖標時，它會慢慢淡入，當我再次點擊它時，它會......只是移動它的權利......沒有我的400速度......爲什麼？ –

我很高興如果我有幫助:) – kosmos

$('button').click(function() { 
 

 
    $('.menu').slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>click</button> 
 
<div class="menu" style="display:none;"> 
 
    <ul> 
 
    <li>menu 1</li> 
 
    <li>menu1</li> 
 
    <li>menu 3</li> 
 
    <li>menu 4</li> 
 
    </ul> 
 
</div>

來源

2015-09-26 17:38:46 imGaurav

當點擊菜單上，它會打開，當再次點擊關閉

回答

相關問題