jQuery slideDown() Method - kilka opcji rozwijania

Dla specjalistów Webmastering
#1

Witam! :slight_smile:

Z kolegą postanowiliśmy na naszym forum odremontować “Ogłoszenia”. Chcielibyśmy zrobić “pokaz slajdów” czy coś w tym stylu, żeby można było wybrać szczególne menu, a następnie się to rozwinęło, pojawiło. Poszukałam na internecie i znalazłam jQuery slideDown. Fajna sprawa, tylko jednak da się wybrać jedną opcję rozwijania. Oto kod:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});
</script>
 
<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

Na Try It Yourself można sprawdzić, jak to wygląda. Jednak nie wiem, jak dodać kilka opcji rozwijania w jednej linii. Żeby zamiast jednego, czyli “Click to slide down panel” obok niego było inne. Zobrazowałam to jakoś tak w GIMP-ie:

25rpb3s.png

Po kliknięciu na “1” pojawi się “Treść 1”, a po kliknięciu na “2” pojawi się “Treść 2” itd.

Byłabym bardzo wdzięczna za pomoc laikowi :).

Pozdrawiam, Amaterasu.

#2

To nie jest takie proste jak się wydaje. Musisz przypisać elementy do treści która chcesz wyświetlić. slideDown nie schowa ci drugiej treści, więc musisz ją przypisać do zmiennej by przed pokazaniem następnej ukryć aktualnie pokazywaną. Nie możesz też wyświetlać animacji po kliknięciu w element menu drugi raz.

Po przeróbkach twój kod powinien wyglądać mniej więcej tak:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
  var act=$("#content>div:first");
  var actn;
  act.css('display','block');
    $("#menu>div").click(function(){
      actn='#'+$(this).attr('elid');
      if(act==actn) return;
        $(act).slideUp("slow");
        $(actn).slideDown("slow");
      act=actn;

    });
});
</script>
 
<style> 
#menu>div{float:left;}
#menu>div {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#content>div {
    clear:both;
    padding: 50px;
    display: none;
}
}
</style>
</head>
<body>
  <div id="menu">
    <div elid="c1">Click to slide down panel</div>
    <div elid="c2">Click to slide down panel2</div>
    <div elid="c3">Click to slide down panel3</div>
  </div>
  <div id="content">
    <div id="c1">Hello world!</div>
    <div id="c2">Hello world2!</div>
    <div id="c3">Hello world3!</div>
  </div>
</body>
</html>

 

#3

Dziękuję, właśnie o coś takiego chodziło! :slight_smile:

#4

Uhhh… masakra… nie lepiej posługiwać się klasami? Poza tym nie używajmy niepotrzebnych pseudo-selektorów w jQuery.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
  $('#menu').click('div', function(e){
    if ($(e.target).hasClass('active')) return;
    $(this).children().removeClass('active');
    $('#content div').slideUp().parent().find('#'+$(e.target).attr('elid')).slideDown();

    $(e.target).addClass('active');
  });
});
</script>
 
<style> 
#menu>div{float:left;}
#menu>div, .content>div {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#content>div {
    clear:both;
    padding: 50px;
    display: none;
}
#content>div:first-of-type {
  display: block;
}
</style>
</head>
<body>
  <div id="menu">
    <div elid="c1" class="active">Click to slide down panel</div>
    <div elid="c2">Click to slide down panel2</div>
    <div elid="c3">Click to slide down panel3</div>
  </div>
  <div id="content">
    <div id="c1">Hello world!</div>
    <div id="c2">Hello world2!</div>
    <div id="c3">Hello world3!</div>
  </div>
</body>
</html>

 

#5

Pomysł dobry, ale droga okrężna i pod górkę. Szybciej i łatwiej zrobisz to za pomocą JQ + np. bxSlider. Ogólne możesz użyć innej biblioteki dla slideru bo taki efekt chcesz uzyskać, przynajmniej tak wynika z opisu. Ja używam bxSlider bo łatwo go dostosować do własnych potrzeb, w sumie jest bardzo uniwersalny no i dodatkowo wspiera telefony dotykowe. Wszystko można włączyć lub wyłączyć, a i więcej animacji przejść masz do wyboru. Można użyć animacji CSS, jQuery, albo napisać własną - np za która będzie używała slideUp/Down.