[对我最初发布这个问题的方式表示歉意！]
我正在创建一个投资组合类型的网站，当您单击“近期工作”部分中的任何项目时，我需要一个类似于此处看到的效果：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/]