Question

好吧，我被困了，自己找不到答案。希望有人可以给我一个提示。

我尝试满足以下要求：

HTML页面中应该有一个具有固定宽度的新闻块高度。
在此新闻栏中，只有新闻标题可见。
默认情况下，这些新闻会“崩溃”，如果鼠标悬停在它上面，则应“展开”。
由于“新闻块”受其高度的限制，因此应该可以看到滚动条。但只有当前扩展的新闻有必要时，用户才能向下滚动。
Newstitle和Newstext永远不会离开新闻块。

到目前为止一切顺利，我能够满足所有这些要求，除了带滚动条的那个。如果我尝试从当前扩展的新闻中获取滚动条，它会再次折叠并且滚动条消失。我知道我的.hover配置为如果我离开newsentry并且Scrollbar不是newsentry div的一部分它总是SlideUp。但我不知道要改变什么仍然有新闻块的整体滚动条，但如果我试图“达到”它将不会消失。

P.s。：只有Newsentry的滚动条看起来很奇怪。这就是为什么我想要将滚动条“绑定”到父容器：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;
    }

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(){}
);

在您不小心将鼠标悬停在其他新闻条目上之前，这不会关闭新闻文本块。

Answer 4

如果我错了，会有一个笑话。我只想改变你的css

/* not .newsblock **/
      #newsblock {
                height: 200px;
                overflow-y: scroll;/* not auto*/
            }

如何将jQuery .hover（）与溢出

4 个答案: