Question

我是jQuery和JavaScript的新手。我有我设置为display: none的元素列表单击某个元素后，元素列表应该向下切换。它向下翻转，但问题是在切换后反弹。

<div class="category">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
     <h1 class="categoryHeading">Transportation</h1>
    <div class="items">
      <p class="item">MVV</p>
      <p class="item">Bike</p>
    </div>
  </div>

我在stackoverflow上读到它可能是因为点击事件冒泡了DOM并被多次触发。所以我尝试添加行e.stopPropagation();但没有成功。

$(".categoryHeading").click(function(e){
            e.stopPropagation();

      $(".items").toggle(1000);

在我设置“.items”的边距后，反弹已经消失。任何人都可以解释为什么会有一种奇怪的行为吗？ }）;

JSBIN link

Answer 1

toggle事件将几行样式放入<div class="items">。即，以下内容：

display: block;
overflow: hidden;
height: 75.9189px; // this value goes up/down
padding: 0px;
margin: 0px;
width: 330.892px;
opacity: 0.89527; // this value goes up/down

动画完成后，只有一个属性可用：display: block;

如果添加overflow: hidden，则凹凸消失。因此，请将overflow: hidden添加到.items {}。

然而，问题是由padding引起的，<p>是overflow:hidden;元素的一部分。如果在父项上设置了属性<p>，则不使用子项（if (newBitmap==null) { ImagingFactory imagingFactory = new ImagingFactory(); NativeFileStream fileStream = new NativeFileStream(@"D:\path\myfile.png", NativeFileMode.Open, NativeFileAccess.Read); BitmapDecoder bitmapDecoder = new BitmapDecoder(imagingFactory, fileStream, DecodeOptions.CacheOnDemand); BitmapFrameDecode frame = bitmapDecoder.GetFrame(0); FormatConverter converter = new FormatConverter(imagingFactory); // Format32bppPArgb // Format32bppPRGBA converter.Initialize(frame, SharpDX.WIC.PixelFormat.Format32bppPRGBA); newBitmap = SharpDX.Direct2D1.Bitmap1.FromWicBitmap(target, converter); } target.DrawBitmap(newBitmap,new RawRectangleF(0,0,target.Size.Width,target.Size.Height),1,BitmapInterpolationMode.Linear );）周围的边距（因为隐藏了父项的溢出）。这就是它跳起来的原因。

以下是我发现的内容，在JavaScript动画期间为元素设置了哪些属性（在评论中要求）：

动画是用JavaScript制作的。因为增加动画的持续时间非常容易，所以我将此值更改为5000.然后，在开发人员工具（Chrome）中，您可以转到“源”选项卡并停止执行JavaScript（暂停图标上的正确或只是F8，重点是DevTools）。之后，您可以转到元素选项卡并查看其样式的元素。

点击事件上的jQuery切换和滑动切换在切换后切换带有奇怪反弹的元素

1 个答案: