Когда щелчок по меню, она открывается, когда нажмите снова закрыть

У меня есть очень простой:Когда щелчок по меню, она открывается, когда нажмите снова закрыть

 // 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 demo – Tushar

kk, я сделаю это –

@PetrCihlar Проверьте мой ответ boss ... Не использует много переменных ... –

Просто использовать 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

Когда щелчок по меню, она открывается, когда нажмите снова закрыть

ответ

Смежные вопросы