Scroll ul Liste Elemente

Ich versuche, die UL-Liste durch Klicken auf den oberen und unteren Pfeil zu scrollen. Während Scroll sollte es nur ein li-Element anzeigen und die übrigen ausblenden. Bitte, kann jemand mir helfen this.For Code bei der Erreichung überprüfen Sie den Code Stift LinkScroll ul Liste Elemente

<div class="ok-top" id="up"></div> 
<div id="list"> 
<ul class="innerbox"> 
<li>2001</li> 
<li>2002</li> 
</ul> 
<div class="ok-bottom" id="down"></div> 
<div class="boxlines"></div>

für vollständigen Code überprüfen Sie bitte den Code Stift Link

Code pen link

Quelle

2016-09-03 Santosh

Beantworten Sie Ihre eigene Frage und markieren Sie sie als akzeptiert. –

var listcount = $('li').size(); 
 
var cli = 1; 
 
$('#down').click(function() { 
 
    if (cli < listcount) { 
 
    $('li:nth-child(' + cli + ')').slideToggle(); 
 
    cli++; 
 
    } 
 
}); 
 
$('#up').click(function() { 
 
    if (cli > 1) { 
 
    cli--; 
 
    $('li:nth-child(' + cli + ')').slideToggle(); 
 
    } 
 
});

.box { 
 
    height: 200px; 
 
    width: 150px; 
 
    border: 1px solid lightgrey; 
 
} 
 
.boxlines { 
 
    width: 60px; 
 
    left: 46px; 
 
    height: 35px; 
 
    border-top: 2px solid #31b6e7; 
 
    border-bottom: 2px solid #31b6e7; 
 
    margin-top: -11px; 
 
    display: block; 
 
    position: absolute; 
 
    top: 96px; 
 
} 
 
.innerbox { 
 
    list-style: none; 
 
} 
 
.ok-top { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    left: 60px; 
 
    position: absolute; 
 
    border-bottom: 15px solid #333; 
 
} 
 
.ok-bottom { 
 
    width: 0; 
 
    height: 0; 
 
    left: 60px; 
 
    bottom: -9px; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid #333; 
 
    position: relative; 
 
} 
 
div#list { 
 
    overflow: hidden; 
 
    height: 165px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<body> 
 

 
    <div class="ok-top" id="up"></div> 
 

 
    <div id="list"> 
 
    <ul class="innerbox"> 
 
     <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">Select</li> 
 
     <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2001</li> 
 
     <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2002</li> 
 
     <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2003</li> 
 
     <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2004</li> 
 
     <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2005</li> 
 
     <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2006</li> 
 
     <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2007</li> 
 
     <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2008</li> 
 
     <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2009</li> 
 
    </ul> 
 
    </div> 
 

 

 
    <div class="boxlines"></div> 
 
    <div class="ok-bottom" id="down"></div>

Quelle

2016-09-03 10:57:17 Santosh

Scroll ul Liste Elemente

Antwort

Verwandte Themen