JQuery如何显示，隐藏div像滚动mousedown（）和mouseup（）

Question

是否可以显示和隐藏div，例如使用mousedown（）从div1到div5滚动样式？ 我刚开发了一个向下滚动的功能。这工作正常。 我们可以更改此功能，以便在mousedown() viseversa mouseup()时显示div1，div2 ....

事情就是一次只显示一个div

这是我目前的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

当然可以。只需使用.toggleClass。

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

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

HTML code：

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

使用.show()显示，.hide()隐藏。

Answer 3

此处：http://jsfiddle.net/8HQKR/1/或切换http://jsfiddle.net/8HQKR/3/。只需在mouseup和down上使用jQuery show和hide函数。你也可以使用.css（'display'，'none'）和.css（'display'，无论如何）。或者设置display：none;作为css类中的规则然后是addClass和removeClass。如果你去添加和删除类，请查看.toggleClass。