单击相同按钮使用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>