jquery - 在悬停时向下滑动子 div

Question

我想分别在父 div 的悬停时向下滑动子 div。我做了一个功能，我试图向下滑动但它不起作用。我想分别在主 div 上悬停时滑下第 n 个 div。我已经用 jQuery 编写了这个函数。

$(document).ready(function() {
  $(".main").hover(function() {
    myfunction();
  });

  function myfunction(index) {
    $(".main").each(function() {
      $($(this) > div: nth - of -type(2)).slideDown(2000);
    });
  }
});

.main > div:nth-of-type(2) {
  color: blue;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-4 main">
        <div class="col-sm-12" style="background-color:lavender;">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12" style="background-color:yellow;">
          <h3>Lavender</h3>
        </div>
      </div>

      <div class="col-sm-4 main">
        <div class="col-sm-12" style="background-color:lavender;">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12" style="background-color:yellow;">
          <h3>Lavender</h3>
        </div>
      </div>
      <div class="col-sm-4 main">
        <div class="col-sm-12" style="background-color:lavender;">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12" style="background-color:yellow;">
          <h3>Lavender</h3>
        </div>
      </div>
      <button style="margin: 15px 0">Get Result</button>
    </div>
  </div>
</div>

标签： jquery

Answer 1

问题是因为您的选择器中myfunction()的语法无效。您需要在其中使用find()并放置nth-of-type()选择器。尝试这个：

.main > div:nth-of-type(2) {
  color: blue;
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-4 main">
        <div class="col-sm-12" style="background-color:lavender;">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12" style="background-color:yellow;">
          <h3>Lavender</h3>
        </div>
      </div>

      <div class="col-sm-4 main">
        <div class="col-sm-12" style="background-color:lavender;">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12" style="background-color:yellow;">
          <h3>Lavender</h3>
        </div>
      </div>
      <div class="col-sm-4 main">
        <div class="col-sm-12" style="background-color:lavender;">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12" style="background-color:yellow;">
          <h3>Lavender</h3>
        </div>
      </div>
      <button style="margin: 15px 0">Get Result</button>
    </div>
  </div>
</div>

我想分别将子div悬停在父div上

在这种情况下，不要使用each()循环遍历所有.main元素。只需在当前悬停的元素中查找子元素。当鼠标离开父元素时，也用于slideToggle()将它们向上滑动：

.main > div:nth-of-type(1) {
  background-color: lavender;
}

.main > div:nth-of-type(2) {
  color: blue;
  transform: scaleY(0);
  background-color: yellow;
  transition: transform, max-height 0.5s;
  max-height: 0;
}

.main:hover > div:nth-of-type(2) {
  transform: scaleY(1);
  max-height: 100px;
}

button {
  margin: 15px 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-4 main">
        <div class="col-sm-12">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12">
          <h3>Lavender</h3>
        </div>
      </div>
      <div class="col-sm-4 main">
        <div class="col-sm-12">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12">
          <h3>Lavender</h3>
        </div>
      </div>
      <div class="col-sm-4 main">
        <div class="col-sm-12">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12">
          <h3>Lavender</h3>
        </div>
      </div>
      <button>Get Result</button>
    </div>
  </div>
</div>

另请注意，这可以在纯 CSS 中完成，无需 JS：

.main > div:nth-of-type(1) {
  background-color: lavender;
}

.main > div:nth-of-type(2) {
  color: blue;
  transform: scaleY(0);
  background-color: yellow;
  transition: transform, max-height 0.5s;
  max-height: 0;
}

.main:hover > div:nth-of-type(2) {
  transform: scaleY(1);
  max-height: 100px;
}

button {
  margin: 15px 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-4 main">
        <div class="col-sm-12">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12">
          <h3>Lavender</h3>
        </div>
      </div>
      <div class="col-sm-4 main">
        <div class="col-sm-12">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12">
          <h3>Lavender</h3>
        </div>
      </div>
      <div class="col-sm-4 main">
        <div class="col-sm-12">
          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
        </div>
        <div class="col-sm-12">
          <h3>Lavender</h3>
        </div>
      </div>
      <button>Get Result</button>
    </div>
  </div>
</div>