我正在使用这个 jquery 显示/隐藏插件 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ÇO DE ATENDIMENTO E ACOMPANHAMENTO SOCIAL</a></li>
<li><a href="#!">CENTRO COMUNITÁ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);
最佳答案
不需要任何插件,如果你也不想使用jquery ui Accordion。
查看此处演示 http://jsfiddle.net/yeyene/HmwN8/2/
- 在
a
标记中添加rel
标记以及您要打开的 DIV 的 ID。
JQUERY
$(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");
});
});
- 您可以在这里选择您想要的效果http://jqueryui.com/effect/#easing
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>
关于javascript - 显示/隐藏 jquery 插件 - 我之前的 div 保持打开状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17339471/