Question

我试图找出一种方法来对设置为visibility：hidden的元素使用slideToggle，而不是display：none。

原因是因为滑动切换的文本导致其所在的div伸展。是否有任何方法可以保持我想滑动的元素在其位置内滑动而不会扩展div？

HTML：

<section id="image-gallery">
            <div class="container">
            <div id="imageboxing" class="disciplines">
            <img src="images/martial-arts-banner/boxing.png">
            <h3>BOXING</h3>
            </div>

            <div id="imagekb" class="disciplines">
            <img src="images/martial-arts-banner/kickboxing.png">
            <h3>KICKBOXING</h3>
            </div>

            <div id="muaythai" class="disciplines">
            <img src="images/martial-arts-banner/muaythai.png">
            <h3>MUAYTHAI</h3>
            </div>

            <div id="wrestling" class="disciplines">
            <img src="images/martial-arts-banner/wrestling.png">
            <h3>WRESTLING</h3>
            </div>

            <div class="clear"></div>

            </div>

jquery的：

$(document).ready(function() {

    $(".disciplines img").hover(function(){
        $(this).next().slideToggle();


    })



});

Answer 1

您可以将h3元素包含在div：

中

<div>
  <h3>BOXING</h3>
</div>

然后给它一个固定的高度：

.disciplines div {
  height: 50px;
}
h3 {
  margin: 0;
}

不要忘记将选择器修改为：

$('h3', this.parent).slideToggle();

或：

$(this).next().find('h3').slideToggle();

或类似的东西。

＆＃13;

$(document).ready(function() {
  $(".disciplines img").hover(function() {
    $(this).next().find('h3').slideToggle();
  })
});

＆＃13;

.disciplines div {
  height: 50px;
}

h3 {
  margin: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="image-gallery">
  <div class="container">
    <div id="imageboxing" class="disciplines">
      <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png">
      <div>
        <h3>BOXING</h3>
      </div>
    </div>

    <div id="imagekb" class="disciplines">
      <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png">
      <div class="fh">
        <h3>KICKBOXING</h3>
      </div>
    </div>

    <div class="clear"></div>

  </div>

＆＃13;

在可见性隐藏元素上使用jquery slidetoggle？

1 个答案: