0

我有以下代码，我通过显示强度标题和强度摘要的部分呈现

<div id="strengths" class="row">
  <% FR_STRENGTHS.each do |strength| %>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div >
        <h3 class="jobtitle text-center">  <%= strength[1]["title"] %></h3>
        <div class="text-justify strength_summary">
          <p> <%= strength[1]["summary"] %></p>
        </div>
      </div>
    </div>
  <% end %>
</div>

用于翻译目的的优势细节在 yml 文件中（我有与上面相同的代码用于英语挂起的参数）。我想隐藏强度摘要并在用户使用 Jquery 悬停强度标题时显示它，但我无法让它工作。

在 jQuery 传播文档之后，我使用了这个 js 代码：

$(document).ready(function() {
  $('#strengths').on("mouseenter", "h3",
    function() {
      $('.strength_summary').slideDown();
    },
    function() {
      $('.strength_summary').slideUp();
    }
  );
});

在任何情况下，我都不认为使用类作为“strength_summary”的选择器会起作用，因为我假设所有部分在悬停在任何 h3 上时都会向下滑动？但是不可能使用 id 所以......感谢您的帮助！

4

1 回答 1

1

您需要使用遍历功能，因此您只能在当前元素之后滑动 DIV。另外，你不能给两个函数.on()；如果您希望在停止悬停时运行另一个函数，请绑定一个mouseleave事件。

$("#strengths").on({
  "mouseenter": function() {
    $(this).next(".strength_summary").slideDown();
  },
  "mouseleave": function() {
    $(this).next(".strength_summary").slideUp();
  }
}, "h3");
于 2017-06-05T16:30:26.857 回答