JQuery hiển thị và ẩn div trên click chuột (animate)

Đây là mã HTML của tôi:JQuery hiển thị và ẩn div trên click chuột (animate)

<div id="showmenu">Click Here</div> 
<div class="menu" style="display: none;"> 
    <ul> 
     <li>Button1</li> 
     <li>Button2</li> 
     <li>Button3</li> 
    </ul> 
</div>

Và tôi muốn hiển thị .menu trên nhấp chuột vào #showmenu trượt từ trái sang phải (với animate). Khi nhấp một lần nữa vào #showmenu hoặc bất cứ nơi nào trong trang web, .menu sẽ ẩn (trượt trở lại sang trái).

Tôi sử dụng JQuery 2.0.3

Tôi đã thử điều này, nhưng nó không làm những gì tôi muốn.

$(document).ready(function() { 
    $('#showmenu').toggle(
     function() { 
      $('.menu').slideDown("fast"); 
     }, 
     function() { 
      $('.menu').slideUp("fast"); 
     } 
    ); 
});

Nguồn

2013-07-14 MM PP

Được rồi, vậy tại sao -1? –

Nếu câu hỏi của tôi là xấu, hãy giúp tôi cải thiện nó –

tôi nghĩ rằng -1 là không đặt những gì bạn đã thử ở đây .. – krishgopinath

Đó .toggle() method là loại bỏ từ jQuery trong phiên bản 1.9. Bạn có thể làm điều này thay vì:

$(document).ready(function() { 
    $('#showmenu').click(function() { 
      $('.menu').slideToggle("fast"); 
    }); 
});

Demo: http://jsfiddle.net/APA2S/1/

... nhưng như với mã trong câu hỏi của bạn mà sẽ trượt lên hoặc xuống. Để trượt sang trái hoặc phải, bạn có thể làm như sau:

$(document).ready(function() { 
    $('#showmenu').click(function() { 
     $('.menu').toggle("slide"); 
    }); 
});

Demo: http://jsfiddle.net/APA2S/2/

Lưu ý rằng điều này đòi hỏi jQuery-UI's slide effect, nhưng bạn thêm thẻ đó cho câu hỏi của bạn vì vậy tôi cho rằng là OK.

Nguồn

2013-07-14 11:46:25 nnnnnn

Cảm ơn, nhưng như tôi đã nói trong câu hỏi của mình, tôi muốn sử dụng slide bên trái. –

Vâng, tôi vừa thêm phần đó. – nnnnnn

-1 "back-to-left" không trượt lên và xuống – balexandre

Tất nhiên slideDown và slideUp không làm những gì bạn muốn, bạn nói bạn muốn nó được trái/phải, không dẫn đầu/xuống.

Nếu chỉnh sửa của bạn cho câu hỏi thêm thẻ jquery-ui có nghĩa là bạn đang sử dụng giao diện người dùng jQuery, tôi sẽ đi với nnnnnn's solution, sử dụng hiệu ứng của jQuery UI slide.

Nếu không:

Giả sử menu bắt đầu ra có thể nhìn thấy (chỉnh sửa: oops, tôi thấy đó không phải là một giả định hợp lệ, xem lưu ý dưới đây), nếu bạn muốn nó trượt ra bên trái và sau đó trượt trở lại từ bên trái, bạn có thể làm điều này: Live Example | Live Source

$(document).ready(function() { 
    // Hide menu once we know its width 
    $('#showmenu').click(function() { 
     var $menu = $('.menu'); 
     if ($menu.is(':visible')) { 
      // Slide away 
      $menu.animate({left: -($menu.outerWidth() + 10)}, function() { 
       $menu.hide(); 
      }); 
     } 
     else { 
      // Slide in 
      $menu.show().animate({left: 0}); 
     } 
    }); 
});

Bạn cần đặt position: relative trên phần tử menu.

Lưu ý rằng tôi đã thay thế toggle bằng click, vì hình thức toggle đã bị xóa khỏi jQuery.

Nếu bạn muốn menu bắt đầu ẩn, bạn có thể điều chỉnh ở trên. Bạn muốn biết chiều rộng của phần tử, về cơ bản, khi đặt nó ra khỏi trang.

Phiên bản này không quan tâm liệu menu có được hiển thị ban đầu hay không: Live Copy | Live Source

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
<div id="showmenu">Click Here</div> 
<div class="menu" style="display: none; position: relative;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div> 
    <script> 
    $(document).ready(function() { 
     var first = true; 

     // Hide menu once we know its width 
     $('#showmenu').click(function() { 
      var $menu = $('.menu'); 
      if ($menu.is(':visible')) { 
       // Slide away 
       $menu.animate({left: -($menu.outerWidth() + 10)}, function() { 
        $menu.hide(); 
       }); 
      } 
      else { 
       // Slide in 
       $menu.show().css("left", -($menu.outerWidth() + 10)).animate({left: 0}); 
      } 
     }); 
    }); 
    </script> 
</body> 
</html>

Nguồn

2013-07-14 11:45:40

tôi sẽ làm một cái gì đó giống như

DEMO này trong JsBin: http://jsbin.com/ofiqur/1/

<a href="#" id="showmenu">Click Here</a> 
    <div class="menu"> 
    <ul> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 2</a></li> 
     <li><a href="#">Button 3</a></li> 
    </ul> 
    </div>

và trong jQuery đơn giản như

var min = "-100px", // remember to set in css the same value 
    max = "0px"; 

$(function() { 
    $("#showmenu").click(function() { 

    if($(".menu").css("marginLeft") == min) // is it left? 
     $(".menu").animate({ marginLeft: max }); // move right 
    else 
     $(".menu").animate({ marginLeft: min }); // move left 

    }); 
});

Nguồn

2013-07-14 11:51:46 balexandre

<script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".click-header").click(function(){ 
      $(this).next(".hidden-content").slideToggle("slow"); 
      $(this).toggleClass("expanded-header"); 
     }); 
    }); 
</script>

.demo-container { 
    margin:0 auto; 
    width: 600px; 
    text-align:center; 
} 
.click-header { 
    padding: 5px 10px 5px 60px; 
    background: url(images/arrow-down.png) no-repeat 50% 50%; 
} 
.expanded-header { 
    padding: 5px 10px 5px 60px; 
    background: url(images/arrow-up.png) no-repeat 50% 50%; 
} 
.hidden-content { 
    display:none; 
    border: 1px solid #d7dbd8; 
    padding: 20px; 
    text-align: center; 
}

<div class="demo-container"> 
    <div class="click-header">&nbsp;</div> 
    <div class="hidden-content">Lorem Ipsum.</div> 
</div>

Nguồn

2014-03-19 02:25:35

Hãy thử điều này:

<script type="text/javascript"> 
$.fn.toggleFuncs = function() { 
    var functions = Array.prototype.slice.call(arguments), 
    _this = this.click(function(){ 
     var i = _this.data('func_count') || 0; 
     functions[i%functions.length](); 
     _this.data('func_count', i+1); 
    }); 
} 
$('$showmenu').toggleFuncs(
     function() { 
      $(".menu").toggle("drop"); 
      }, 
      function() { 
       $(".menu").toggle("drop"); 
      } 
); 

</script>

fuction Đầu tiên là một thay thế cho JQuery phản Toggle :). Hoạt động tốt với JQuery 2.0.3 và giao diện người dùng JQuery 1.10.3

Nguồn

2015-06-19 07:24:30

JQuery hiển thị và ẩn div trên click chuột (animate)

Trả lời

Các vấn đề liên quan