0

我正在使用这个 jquery Show/hide 插件http://papermashup.com/jquery-show-hide-plugin/

我打算在单击页面上的任何链接时关闭以前的 div ，但是当我单击新链接时，我以前的 div 保持打开状态。

我的html

<div id="slidingDiv_2" class"toggleDiv"><!-- Conteúdo do menu 1 -->
      <div class="opmenu">
      <table>
      <tr>
        <td>
        <ul>
            <li><a href="#!">CENTROS DE ACTIVIDADES NOS TEMPOS LIVRES</a></li>
            <li><a href="#!">SERVI&Ccedil;O DE ATENDIMENTO E ACOMPANHAMENTO SOCIAL</a></li>
            <li><a href="#!">CENTRO COMUNIT&Aacute;RIO</a></li>
            <li><a href="#!">APARTAMENTO PARA A AUTONOMIA DE VIDA</a></li>
        </ul>
        </td>
        </tr>
        </table>
       </div>
    </div>

我的链接：

<li class="items_menu"><a href="#" class="show_hide" rel="#slidingDiv">A INSTITUIÇÃO</a></li>

我的js：

(function ($) {
    $.fn.showHide = function (options) {

        //default vars for the plugin
        var defaults = {
            speed: 1000,
            easing: 'easeInQuart',
            changeText: 0,
            showText: 'Mostrar',
            hideText: 'Ocultar'

        };
        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);
4

2 回答 2

1

不需要任何插件，如果你也不想使用 jquery ui 手风琴。

在这里查看演示http://jsfiddle.net/yeyene/HmwN8/2/

  • 使用您要打开的 DIV 的 id 在标签中添加rel标签。a

查询

$(document).ready(function(){
    $('a.toggle').on('click', function(){
        $('.content').slideUp('2000', "easeOutBounce");        
        if($('div#'+$(this).attr('rel')).css('display')=='block')
            $('div#'+$(this).attr('rel')).slideUp('2000', "easeOutBounce");
        else
            $('div#'+$(this).attr('rel')).slideDown('2000', "easeOutBounce");
    });
});

HTML

<a class="toggle" rel="div_1">View 1</a>
<a class="toggle" rel="div_2">View 2</a>
<a class="toggle" rel="div_3">View 3</a>
<div class="content" id="div_1">( 1 ) Lorem Ipsum ...</div>
<div class="content" id="div_2">( 2 ) Lorem Ipsum ...</div>
<div class="content" id="div_3">( 3 ) Lorem Ipsum ...</div>
于 2013-06-27T09:44:50.260 回答
1

单击任何链接时关闭 div

$('a').on('click', function(){
    $('Selectorfordiv').slideUp(); // or slideToggle or css({'display':'none'})
});

可以在 div 变得可见时添加一个类，因此您可以将这个类作为目标，在单击任何链接时关闭。

PS。对于显示/隐藏不要使用插件，它会花费更多资源然后自己编写行。

于 2013-06-27T09:33:18.953 回答