如何结合使用jQuery .hover()和溢出

Question

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

我试着满足以下要求：

• 在具有固定宽度和高度的HTML页面中应该有一个新闻块。
• 在这个新闻组中，只有新闻标题是可见的。
• 这些消息在默认情况下是“崩溃”的，如果鼠标已经关闭，就应该“扩展”。
• 由于“Newsblock”受其高度的限制，应该有一个可见的滚动条。但是，只有当当前扩展的新闻有必要时，用户才能向下滚动。
• Newstitle和Newstext不应该离开新闻组。

到目前为止，我能够满足所有这些要求，除了一个有滚动条。如果我试图从当前扩展的新闻中到达滚动条，它会再次崩溃，滚动条消失。据我所知，我的.hover被配置为，如果我离开新哨站，并且滚动条不是newsentry的一部分，它总是SlideUp。但我不知道要更改什么，以便仍然有一个完整的滚动条的新闻块，但不会消失，如果我试图‘到达’它。

P.s.：只有纽森特里的一个滚动条看起来很奇怪。这就是为什么我希望将滚动条绑定到父容器:S的原因。

    <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;
    }

Answer 1

一个解决方案不是在游标离开它时关闭.newsentry，而是只在它进入另一个.newsentry或离开#newsblock时关闭它。滚动条是#newsblock的一部分，当您继续使用它时，条目不再关闭。

编辑：在我们讨论滚动问题之后，我在关闭动画中添加了一个step回调，以确保在关闭其他条目时，打开的.newsentry顶部仍然可见。

下面是一个有用的例子：

​

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>

​

Answer 2

试试这个：

$(".newsentry, .newsblock").hover( // <-- changed
        function() {
            $(this).children(".newstext").stop(true,true).slideDown();
        },
        function() {
            $(this).children(".newstext").stop(true,true).slideUp();
        }
    );

这将确保当您悬停在标头或块本身上时，块将保持打开状态。

这就是你的意思吗？

Answer 3

如果您使用单击操作而不是悬停来滑下新闻文本块，情况会好得多，因为用户可能会意外地悬停在任何新闻条目上，以便到达滚动条。我想你需要手风琴一样的功能。如果您可以单击而不是悬停，您可以使用下面的代码。

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

或者使用下面的一个来进行悬停。

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

这将不会关闭新闻文本块，直到您意外地悬停在另一个新闻条目上。