javascript - 如何结合使用jQuery .hover()和Overflow

好吧，我被困住了，自己也找不到答案。希望有人能给我提示。

我尝试满足以下要求:

HTML页面中应该有一个固定宽度的Newsblock。
高度。

在此Newsblock中，仅新闻标题可见。

这些新闻默认情况下为“折叠”的，如果鼠标悬停在其上方，则应“展开”。

由于“新闻块”受其高度限制，因此应该有一个滚动条可见。但只有在当前展开的新闻有必要的情况下，用户才能向下滚动。

Newstitle和Newstext绝不应该离开Newsblock。

到目前为止，到目前为止，除了滚动条之外，我能够满足所有这些要求。如果我尝试从当前扩展的新闻中移出滚动条，它会再次折叠并且滚动条消失。我了解我的.hover配置为如果我离开新闻条目并且Scrollbar不是新闻条目div的一部分，则它始终为SlideUp。但是我不知道要更改什么，以使Newsblock仍然具有整体滚动条，但是如果我尝试“到达”它，它不会消失。

附注:仅每个Newsentry的滚动条看起来很奇怪。那就是为什么我想将滚动条“绑定(bind)”到父容器:S

HTML

    <div id="newsblock">
        <div> // some auto generated div's i have to life with, so the news entries are not 'direct' children of the newsblock.
            <div class="newsentry">
                <div class="newstitle">...</div>
                <div class="newstext">...</div>
            </div>
        ... another 9 'newsentry' divs.
        </div>
    </div>

JS

    $(".newsentry").hover(
        function() {
            $(this).children(".newstext").stop(true,true).slideDown();
        },
        function() {
            $(this).children(".newstext").stop(true,true).slideUp();
        }
    );

CSS

    .newsblock {
        height: 200px;
        overflow-y: auto;
    }

最佳答案

解决方案可以是仅当光标进入另一个.newsentry或离开.newsentry时才关闭它，而不是关闭它。
滚动条是#newsblock的一部分，当您继续操作时，该条目不再处于关闭状态。

编辑:在讨论了滚动问题之后，我向结束动画添加了#newsblock回调，以确保当其他条目关闭时，打开的step的顶部保持可见。

这是一个工作示例:

var $newsblock = $("#newsblock");

function closeAllNews(slideUpArgs){
    return $(".newstext").stop(true).slideUp(slideUpArgs);
}

function openNews(news, slideDownArgs){
    $(news).find(".newstext").stop(true).slideDown(slideDownArgs);
}

function ensureNewsTopVisible(news){
  // Check if the top of the newsentry is visible...
  var top = $(news).position().top;
  if(top < 0){
    // ...and if not, scroll newsblock accordingly.
    $newsblock.scrollTop($newsblock.scrollTop() + top);
  }
}

$(".newsentry").each(function(){
    var $this = $(this);
    // When the mouse enter a news entry...
    $this.on("mouseenter", function(){
        // ...close all opened entries (normally there is at most one)...
        closeAllNews({
          // (while making sure that the top of this entry remains visible
          // at each step)
          step: ensureNewsTopVisible.bind(null, $this)
        });
        // ...open this newsentry.
        openNews($this);
    });
});

// When the mouse get out of the newsblock, close all news.
$newsblock.on("mouseleave", closeAllNews);

.newstitle {
    font-size: 2em;
}
.newstext {
    display: none;
}
#newsblock {
    max-height: 150px;
    overflow: scroll;
}

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

<div id="newsblock">
    <div>
        <div class="newsentry">
            <div class="newstitle">News 1</div>
            <div class="newstext"></div>
        </div>
        <div class="newsentry">
            <div class="newstitle">News 2</div>
            <div class="newstext"></div>
        </div>
        <div class="newsentry">
            <div class="newstitle">News 3</div>
            <div class="newstext"></div>
        </div>
        <!-- Etc. -->
    </div>
</div>


<!-- Ignore the script below. It is just filling in the news' text. -->
<script>
  $(".newstext").each(function(i, newstext){
    $.get("http://baconipsum.com/api/?type=meat-and-filler&format=html&paras=5&num=" + i)
      .then(function(ipsumHtml){
        $(newstext).html(ipsumHtml);
      });
  });
</script>