0

如何让我的 CSS 样式背景和文本顺利滑入 jQuery 动作？现在再次单击关闭时，背景颜色将消失，然后文本将向上滑动。我希望背景保持不变并随着文本向上滑动。

我还试图弄清楚如何在单击另一个动作时关闭一个动作。我的代码在这里。

4

2 回答 2

1

这并不完全明显，但是在这行代码中：

  $(this).siblings().slideToggle('slow').parent().toggleClass('expanded');

该slideToggle函数实际上将以异步方式运行。也就是说，它很可能toggleClass会在动画完成之前运行。如果您阅读了有关slideToggle 的 jQuery 文档，您会看到它接受一个callback函数作为可选参数。任何时候你想确保一段代码在动画完成后运行，然后使用回调。例如：

var _this = this; // because this will point to a different object inside the callback
$(this).siblings().slideToggle('slow', function() {
   $(_this).parent().toggleClass('expanded');
});

或类似的东西。您正在寻求的最终结果不是很明显。但希望这会对您有所帮助。

于 2012-12-23T07:04:16.620 回答
0

对于背景问题：

尝试将 box type css 属性添加到您希望保留其背景颜色的容器中； 

// I.e.,
box-sizing: border-box
// @see https://developer.mozilla.org/en-US/docs/CSS/box-sizing

如果这不起作用，请尝试浮动元素并从内部清除其浮动：

<div style="float: left; position: relative; width: 320px; height: 240px; margin: 10px; background: #ff0000;">
  <p>Content</p>
  <br style="clear: both;" />
</div>

浮动将强制执行宽度和背景颜色，而不考虑其他任何内容。

至于在下一个操作打开之前关闭您的操作： 请查看以下链接中的脚本。这是我几年前写的一个脚本，但它有你想做的基本框架思想：

http://abi.edu/js/resources-page.js

切换信息项隐藏所有信息项并显示传递了 id 的信息项；即，对于每个链接点击隐藏所有显示一次点击。

大约一年前还有另一个更干净的例子：http: //abitribeca.com/index/about

单击左侧栏中的链接以查看内容区域的更改。

还要记住这些是简单的例子，你也可以做一些更复杂的事情，比如：

http://elycruz.com/portfolio

@注意最后一个例子有点混乱，因为我正在学习如何从 php 后端处理 json（虽然很好）。

于 2012-12-23T07:12:14.633 回答