Javascript Jquery：单击时显示Div（动画），仅在单击不同链接时关闭+；一次只有一个DIV

[对我最初发布此问题的方式表示歉意！]

我正在创建一个公文包类型的网站，我需要一个类似的效果，当你点击“最近的工作”部分中的任何项目时，可以在这里看到：

本质上，这就是我试图实现的功能：

单击项目上的链接（多个项目将具有指向不同内容的链接）

单击后，一个div将设置动画并打开新内容（在预定义的位置）

打开的div将有一个关闭按钮。如果单击“关闭”按钮，DIV将设置动画并关闭

一次只能显示其中一个具有新内容的div。因此，如果单击第二个链接，第一个div应该快速关闭，第二个div应该打开

我非常接近下面代码的解决方案，但我遇到了一个主要问题

如果先打开DIV 1，然后再打开DIV 2，它就会知道折叠/隐藏DIV 1，这非常完美（因此一次只显示一个DIV）

但是，如果打开DIV 1，然后单击DIV 1中的close（红色X）按钮，它将开始关闭，但一旦关闭，它将再次打开。我只希望它关闭并保持关闭状态（直到再次单击链接）

我试过一些方法，但都不能很好地发挥

您可以在这里看到这一点：

（尝试单击第一个“go”按钮，然后单击出现问题的红色“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动画向上滑动而不是向下滑动。我试着将“slideUp”改为“slideDown”，但没有成功

非常感谢您的帮助

---

[注意：脚本源：http://papermashup.com/jquery-show-hide-plugin/]

经过大量的尝试和错误，我终于找到了如何让它正常工作的方法

我想确保把它包括在这里，这样如果其他人有同样的问题，他们就可以直接找到解决方案

以下是更新的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).is(':visible') ? $('.toggleDiv').slideUp(options.speed, options.easing) : 
$(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);

下面是div（显示和隐藏）的外观：

<div id="slidingDiv" class="toggleDiv" style="clear:both;display: none;">
    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>

这是我第一块（1）的内容。这不是很有趣吗？

这是一些非常令人兴奋的内容，我将在以后填写。这是第二座（2）

---

链接与我原来的问题中的链接相同。

不是人们为你工作的地方。嗨，Lix。。。我完全同意。相信我，如果我没有在过去的两个小时里寻找一种方法来完成这件事，并尝试不同的事情（没有一件接近），那么我就不会寻求帮助了。当然，我可以自己继续寻找和尝试，但我希望有人能把我推向正确的方向。如果我的帖子把你弄糊涂了，我深表歉意，因为这不是我的本意。一般来说，如果你试过什么，你应该把它贴出来。为此，您可以单击问题末尾的“编辑”链接。复制/粘贴您编写的带有说明的代码。如果你不知道如何使它看起来好看，那没关系，把它放在那里，有人可能会帮你复制编辑它，以便以后出现。@Lix为我最初的帖子中缺少内容而道歉。我已经完全编辑它，并包括我的HTML，CSS，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: ''
}); 


});

(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).is(':visible') ? $('.toggleDiv').slideUp(options.speed, options.easing) : 
$(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);

<div id="slidingDiv" class="toggleDiv" style="clear:both;display: none;">
    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; display: none;">
    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>