JQuery pokazywać i ukrywać div na kliknięcie myszą (ożywiony)

To jest mój kod HTML:JQuery pokazywać i ukrywać div na kliknięcie myszą (ożywiony)

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

I chcę pokazać .menu na kliknięcie na #showmenu przesuwane od lewej do prawej (z ożywionej). Po ponownym kliknięciu na #showmenu lub w dowolnym miejscu strony witryny, ukryje się (przesuń z powrotem na lewo).

używam jQuery 2.0.3

Próbowałem to, ale to nie to, co chcę.

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

Źródło

2013-07-14 MM PP

OK, więc dlaczego -1? –

Jeśli moje pytanie jest złe, proszę pomóż mi to poprawić –

Myślę, że -1 jest za to, że nie stawiam tego, co tu wypróbowałeś. – krishgopinath

że .toggle() method był usunięto z jQuery w wersji 1.9. Można to zrobić w zamian:

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

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

... ale jak z kodem w swoim pytaniu, które ślizgają się w górę lub w dół. Aby przesunąć w lewo lub w prawo można wykonać następujące czynności:

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

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

Zwracając uwagę, że wymaga to jQuery-UI's slide effect, ale dodaje, że znacznik na pytanie, więc zakładam, że jest OK.

Źródło

2013-07-14 11:46:25 nnnnnn

Dzięki, ale jak powiedziałem w moim pytaniu, chcę użyć suwaka w lewo. –

Tak, właśnie dodawałem tę część. – nnnnnn

-1 "z powrotem na lewo" nie jest przesuwane w górę iw dół – balexandre

Oczywiście slideDown i slideUp nie rób, co chcesz, mówiłeś, że ma to być w lewo/prawo, a nie góra/dół.

Jeśli edytowanie Twojego pytania dodając tag jquery-ui oznacza, że korzystasz z interfejsu jQuery, skorzystam z nnnnnn's solution, używając efektu jQuery UI: slide.

Jeśli nie:

Zakładając menu rozpoczyna się widzialne (edit: ups, widzę, że nie jest ważne założenie, patrz uwaga poniżej), jeśli chcesz go przesunąć się w lewo i następnie można przesunąć z powrotem z lewej strony, można to zrobić: 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}); 
     } 
    }); 
});

Musisz umieścić position: relative na element menu.

Zauważ, że zastąpiłem twoją toggle przez click, ponieważ ta forma toggle została usunięta z jQuery.

Jeśli chcesz, aby menu było ukryte, możesz dostosować powyższe. Chcesz poznać szerokość elementu, w zasadzie, kiedy umieszczasz go poza stroną.

Ta wersja nie obchodzi, czy menu jest początkowo widoczne, czy nie: 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>

Źródło

2013-07-14 11:45:40

chciałbym zrobić coś takiego

demo 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>

oraz w jQuery tak proste, jak

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 

    }); 
});

Źródło

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>

Źródło

2014-03-19 02:25:35

Spróbuj tego:

<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>

Pierwszy fuction jest alternatywą do JQuery przestarzałe przełączanie :). Działa dobrze z JQuery 2.0.3 i JQuery UI 1.10.3

Źródło

2015-06-19 07:24:30

JQuery pokazywać i ukrywać div na kliknięcie myszą (ożywiony)

Odpowiedz

Powiązane problemy