Question

[我发布这个问题的初步方式道歉！]

我正在创建一个投资组合类型的网站，当您点击“最近的工作”部分中的任何项目时，我需要类似于此处所见的效果：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/]

Answer 1

经过大量的反复试验后，我终于想出了如何让它正常工作。

我想确保将其包含在此处，以便如果其他人遇到同样的问题，他们可以直接找到解决方案。

这是更新的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>

<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>

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

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

1 个答案: