显示/隐藏 DIV 脚本答案

【问题标题】：Show/hide DIV script显示/隐藏 DIV 脚本
【发布时间】：2013-06-07 12:30:24
【问题描述】：

当您单击 http://kaye.at/test/ 上的月份时，div 会显示/隐藏。

当页面加载时，它们都是打开的，我该如何让六月打开而其他页面在页面加载时关闭？

或者如何让它们在页面加载时全部关闭？

JS：

$(document).ready(function(){


$('.show_hide').showHide({           
    speed: 1000,    
    easing: '',
    changeText: 0,
    showText: 'View',
    hideText: 'Close'

}); 


});

HTML：

 <a href="#" class="show_hide" rel="#slidingDiv">View</a><br />
 <div id="slidingDiv">
    Fill this space with really interesting content.
 </div>



 <a href="#" class="show_hide" rel="#slidingDiv_2">View</a><br />
 <div id="slidingDiv_2">
    Fill this space with really interesting content.
 </div>

【问题讨论】：

.content { display: none; } #slidingDiv_3 .content { display: block; }

标签： jquery html toggle hide show

【解决方案1】：

选择所有容器，排除六月的容器（编号 3），隐藏其余容器？

$('[id^="slidingDiv_"]').not('#slidingDiv_3').hide();

更好的选择是给它们一个类，用 CSS 隐藏它们，只显示 ID 为 #slidingDiv_3 的类！

<div id="slidingDiv" class="slidingDivs">
    Fill this space with really interesting content.
</div>

css:

 #slidingDiv_3 {display:block;}
.slidingDivs  {display:none;}

【讨论】：

【解决方案2】：

在它所在的位置添加一个类：display:none;，如下所示：

.class1{
 //your styling
  display:none;
}

等等

这样当你点击它时显示：将设置为display:block;（或者你的显示是什么）

【讨论】：

【解决方案3】：

当文档加载到浏览器中时，您为什么不尝试滑动切换它们。

 $(document).ready(function() {
      $('#slidingDiv').slideToggle(options.speed, options.easing)
      $('#slidingDiv_2').slideToggle(options.speed, options.easing)
    });

【讨论】：