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()显示，和隐藏。