Question

我使用jQuery插件显示/隐藏div但我不知道如何让它一次只显示一个div，所以当我点击链接显示div时，它隐藏当前打开的所有其他内容，仅显示最近点击的内容。

这是jQuery：

{
    '2015-05-16': [ '3.99', '4.0' ],
    '2015-05-17': [ '3.14159' ]
}

这是您添加到链接以进行div显示/隐藏的类：

(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: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
    changeText: 0, // if you dont want the button text to change, set this to 0
    showText: 'View',// the button text to show when a div is closed
    hideText: 'Close' // the button text to show when a div is open
}); 
});

任何人都有任何想法如何让它只允许你一次打开一个？目前它允许多个div同时打开！

提前致谢！

Answer 1

这个叫做jQuery UI Accordion的东西。通过调用函数，jQuery会自动将您的div列表转换为手风琴。手风琴是一种显示/隐藏机制，一次只显示一个div。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <div id="accordion">
    <h3>Div #1</h3>
    <div>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
    </div>
    <h3>Div #2</h3>
    <div>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
    </div>
    <h3>Div #3</h3>
    <div>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
    </div>
    <h3>Div #4</h3>
    <div>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
    </div>
    <h3>Div #5</h3>
    <div>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
    </div>
    </div>
<script>
$("#accordion").accordion();
</script>

＆＃13;

jQuery一次只显示一个div

1 个答案: