【发布时间】：2013-09-18 18:33:04
【问题描述】：
[对我最初发布这个问题的方式表示歉意！]
我正在创建一个投资组合类型的网站，当您单击“近期工作”部分中的任何项目时，我需要类似于此处看到的效果：http://themes.zenthemes.net/cleanr/
基本上这是我想要实现的功能：
- 点击一个项目上的链接（多个项目会有一个指向不同内容的链接）
- 点击后，div 会以动画形式显示并打开新内容（在预定义的位置）
- 打开的 div 将有一个关闭按钮。如果单击关闭按钮，则 DIV 将设置动画并关闭。
- 一次只能显示一个具有新内容的 div。因此，如果点击第二个链接，第一个 div 应该快速关闭，第二个 div 应该打开。
我非常接近使用以下代码的解决方案，但遇到了一个重大故障......
如果您打开 DIV 1，然后打开 DIV 2，它知道折叠/隐藏 DIV 1，这是完美的（因此一次只显示一个 div）。
但是，如果您打开 DIV 1，然后单击 DIV 1 中的关闭（红色 X）按钮，它会开始关闭，但一旦关闭，它就会重新打开。我只是希望它关闭并保持关闭状态（直到再次点击链接）。
我已经尝试了一些东西，但无法很好地播放。
您可以在此处查看此操作： http://jsfiddle.net/tdHTN/1/
（尝试单击第一个“开始”按钮，然后单击出现的红色“x”以查看问题。）
这是我的 CSS：
#slidingDiv, #slidingDiv_2{
height:200px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
display:none;}
这是我的 HTML：
<div id="slidingDiv" class="toggleDiv" style="clear:both;">
This is my content for block ONE (1). Isn't it so super interesting?
<a href="#" class="show_hide" rel="#slidingDiv"><img src="https://cdn2.iconfinder.com/data/icons/officeicons/PNG/48/Close.png" width="48" height="48" alt="close" /></a>
<div id="slidingDiv_2" class="toggleDiv" style="clear:both;">
This is some super exciting content that I will fill in later. This is block TWO (2)
<a href="#" class="show_hide" rel="#slidingDiv_2"><img src="https://cdn2.iconfinder.com/data/icons/officeicons/PNG/48/Close.png" width="48" height="48" alt="close" /></a>
<a href="#" class="show_hide" rel="#slidingDiv"><img src="https://www.bcidaho.com/_images/go-button-trans.gif" alt="Play" width="42" height="41" border="0" align="left" /></a>
<a href="#" class="show_hide" rel="#slidingDiv_2"><img src="https://www.bcidaho.com/_images/go-button-trans.gif" alt="Play" width="42" height="41" border="0" align="left" /></a>
这是我的 JS：
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
$(document).ready(function(){
$('.show_hide').showHide({
speed: 1000, // speed you want the toggle to happen
easing: ''
});
});
我试图完成的另一件事（如果可能的话）是让 DIV 动画向上滑动而不是向下滑动。我尝试将“slideUp”更改为“slideDown”，但没有成功。
非常感谢您的帮助！
[注：脚本来源：http://papermashup.com/jquery-show-hide-plugin/]
【问题讨论】：
-
Stack Overflow不是供人们为您工作的地方。
-
嗨 Lix... 我完全同意。相信我，如果我没有在过去的 2 个小时里寻找一种方法来实现这一目标并尝试不同的事情（没有一个接近），那么我就不会寻求帮助。当然，我可以自己继续寻找和尝试，但我希望有人能推动我朝着正确的方向前进。如果我的帖子以错误的方式激怒了您，我深表歉意，因为这不是我的意图。
-
一般来说，如果你尝试过一些东西，你应该发布它。为此，您可以单击问题末尾的“编辑”链接。复制/粘贴您编写的代码并附上解释。如果您不知道如何使它看起来不错，那没关系，只需将它放在那里，有人可能会帮助复制编辑它以便稍后出现。
-
@Lix 对我最初的帖子中缺少内容表示歉意。我已经完全编辑了它并包含了我的 HTML、CSS、JS 的最新版本。我希望你的周末过得愉快！
标签： javascript html jquery jquery-plugins