JQuery如何顯示，隱藏像滾動mousedown（）和mouseup（）

Question

是否有可能顯示和隱藏像從div1到div5 mousedown（）滾動樣式的div？ 我剛剛開發了一個向下滾動的功能。這工作正常。 我們可以改變這個功能來顯示div1，div2 ....當mousedown() viseversa爲mouseup()？

的事情是，只顯示在一個時間

這裏一個格是我目前的jQuery代碼

$(document).ready(function() { 
    var mouseisdown = false; 
    $('.up').mousedown(function(event) { 
     mouseisdown = true; 
     var topVal = $(".content").css("top").replace(/[^-\d\.]/g, ''); //remove the px from the current top val 
     topVal = parseInt(topVal); 
     console.log(topVal); 
     if(topVal < 0){ //This is to stop it when it reaches the top 
     $('.up').parents(".container").find(".content").stop().animate({"top":topVal + 20 + 'px'},'slow'); 
     if (mouseisdown) 
    setTimeout(ScrollUp, 400); 
     } 
    }).mouseup(function(event) { 
     mouseisdown = false; 
    }); 

    $('.dn').mousedown(function() { 
     mouseisdown = true; 
      var topVal = $(".content").css("top").replace(/[^-\d\.]/g, ''); 
     topVal = parseInt(topVal); 
     console.log($(".content").height()+ " " + topVal); 
     if(Math.abs(topVal) < ($(".content").height() - $(".container").height() + 60)){ //This is to limit the bottom of the scrolling - add extra to compensate for issues 
     $('.up').parents(".container").find(".content").stop().animate({"top":topVal - 20 + 'px'},'slow'); 
     if (mouseisdown) 
    setTimeout(ScrollDown, 400); 
     } 
    }).mouseup(function() { 
     mouseisdown = false; 
    }); 
}); 

CSS

div.container { 
    overflow:hidden; 
    width:250px; 
    height:200px; 
    zoom: 1; /* IE7 Fix - doesnt work */ 
    } 
    div.content { 
    position:relative; 
    top:0; 
    left: 110px; /*this is for demo - it cuts off the text */ 
    zoom: 1; /* IE7 Fix - doesnt work */ 
    clear:bothl; 
    } 
    .up, .dn{ 
     border:1px solid orange; 
    cursor: pointer; 
    } 
    .up:hover, .dn:hover{ 
     background-color:yellow; 
    } 

HTML

<div class="container"> 
    <button class="up">Up</button> &nbsp; 
    <button class="dn">Down</button> 
    <hr style="clear:both;"/> 

    <div class="content"> 
    <div id="div1"><p>Dolore magna aliquam erat volutpat.</p><p> Suscipit lobortis nisl ut aliquip ex ea consequat.</p></div> 
    <div id="div1"><p>Suscipit lobortis nisl ut aliquip ex</p><p> ea commodo Dolore magna aliquam erat volutpat.</p></div> 
    <div id="div1"><p>Dolore magna aliquam erat volutpat.</p><p>Suscipit lobortis nisl ut aliquip ex ea consequat.</p></div> 
    </div> 
</div> 

需要顯示在這裏顯示很多我們可以看到。我需要一次只顯示一個div similar

Answer 1

這裏：http://jsfiddle.net/8HQKR/1/或與切換http://jsfiddle.net/8HQKR/3/。只需使用jQuery顯示和隱藏鼠標和鍵盤上的功能。你也可以使用.css（'display'，'none'）和.css（'display'，不管）。或設置顯示：無;作爲一個規則在CSS類然後addClass和removeClass。如果你通過添加和刪除類去看看.toggleClass。

Answer 2

當然可以。只需使用.toggleClass即可。

<div onmouseover="javascrpt: $('#container').toggleClass('active')"> bla bla </div> 

例子：http://jsfiddle.net/hqCcx/21/

HTML代碼：

<div id="_1"><p>Div1 Dolore magna aliquam erat volutpat.</p><p> Suscipit lobortis nisl ut aliquip ex ea consequat.</p></div> 

<div id="_2"><p>Div2 Suscipit lobortis nisl ut aliquip ex</p><p> ea commodo Dolore magna aliquam erat volutpat.</p></div> 

<div id="_3"><p>Div3 Dolore magna aliquam erat volutpat.</p><p>Suscipit lobortis nisl ut aliquip ex ea consequat.</p></div> 

Javascript代碼：

var scrolldiv = function scrolldiv (par) { 

    if (par === "up") 
     currentIndex++; 
    else 
     currentIndex--; 

    for (var c = 0; c < div.length ; c += 1) { 
     if (c === currentIndex) 
      $("#_"+c).show(); 
     else 
       $("#_"+c).hide();  
    } 
} 

Answer 3

使用.show()顯示，和隱藏。