最近项目网站里需要一个新手帮助问答页面。
首先页面框架让我费了一点脑子，用了一个类似选项卡的li和ul布局，用css伪类实现切换。不过构思好了之后，用HTML和CSS实现起来难倒是不难，就是细节需要调整很久。
利用jQuery应该也能从另一方面实现选项卡效果，下次试试。
关于问答的展开和收起，经历了几个优化的过程。
常见问题选项卡是这样：
DOM是这样的：
<div class="common">
<em></em>
<h2>常见问题</h2>
<ul class="trademarkQ">
<h3>商标问题</h3>
<li>申请商标需要提交哪些材料？</li>
<p>⑴商标注册委托书、申请书用于代理机构商标注册业务，商标注册委托书，申请书可在网站自动生成。<br/>
⑵申请人资格证明资料：<br/>
a.以公司名义申请，附企业营业执照复印件;<br/>
b.以个体名义申请，附身份证或者护照复印件及个体营业执照。<br/>
⑶商标图样：<br/>
商标图样（JPG格式，400*400-1000*1000大小）。<br/>
<!---->
</p>
<li>复审材料需要哪些？</li>
<p>
......
</p>
<li>如果我是以个人名义申请，现在能不能变更为公司呢？</li>
<p>
......
</p>
<li>为什么要进行商标驳回复审？</li>
<p>
......
</p>
<li>为什么要进行商标续展？</li>
<p>
......
</p>
</ul>
<ul class="copyrightQ">
<h3>版权问题</h3>
<li>美术作品著作权登记需要哪些文件？</li>
<p>
......
</p>
<li>文字作品版权登记需要哪些材料？</li>
......
最先开始写的效果是，单击问题，收起其他版块问题的ul，并展开对应li后面紧接的p。
代码如下：
$(".common li").click(function(){
$(this).next("p").slideToggle();
$(this).parent().siblings("ul").slideToggle();
}
注意，这时同一版块中的其余问题都还保留着，于是就遇到了问题：在同一版块中，问题1的答案展开的情况下单击问题2，其他版块问题ul滑动展开，从此整个节奏都乱了，233。
于是，我想的第一个解决办法是，单击时获取所有答案p的开合状态，将多余的关闭。不过节奏还是乱，因为单击一次ul就会slideToggle滑动切换开合状态。
if($(this).next("p").css("display") == "block"){
$(this).next("p").siblings("p").hide();
if($(this).parent().siblings("ul").css("display")=="block"){
$(this).parent().siblings("ul").slideUp();
}
}
划重点：
然后我得出了一个浅显易懂的结论，有点像数学证明题的“显然，...”，哈哈哈：不要轻易用toggle，它比较适合两种明确对立状态下的切换。
然后我就想 可不可以把情况限定成两种。显示一个问题答案的时候，把其他问题都隐藏，这样就必须关闭这个问题，回到初始状态，才能继续查看其他问题呗，这么简单。
（不过我现在还是觉得这样显示得没有效果一好看）
$(this).nextAll("li").slideToggle();
$(this).prevAll("li").slideToggle();
然后效果二里面，由于隐藏了版块中其他问题，这个问题的序号变成了一。我又不死心地用了toggle。
用toggle(fn,fn)切换li的样式：
$(this).toggle(function(){
$(this).css("list-style-type","disc")
},function(){
$(this).css("list-style-type","decimal")
});
后来以失败告终，原因是toggle(fn,fn)函数在jQuery1.9以后被取消，悲痛/(ㄒoㄒ)/~~
jquery 1.9里面已经删除了toggle（fn1, fn2）函数：
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.
项目中用的是1.9.1的jQuery，不能采用调用1.8.3的方式（据说这个版本比较稳定，这是题外话）。
那么我用flag方法替代吧：
//单击常见问题显示对应答案csj20170410
$(document).ready(function(){
var flag=0;
$(".common li").click(function(){
if(flag==0){
$(this).next("p").slideDown();//展开对应的答案<p>
$(this).parent().siblings("ul").slideUp();//展开父级<ul>
$(this).siblings("li").slideUp();//收起this同级<li>
$(this).css("list-style-type","disc");
flag=1;
}else{
$(this).next("p").slideUp();
$(this).parent().siblings("ul").slideDown();
$(this).siblings("li").slideDown();
$(this).css("list-style-type","decimal");
flag=0;
}
});
});
或者
$(document).ready(function(){
$(this).next("p").slideToggle();//切换对应的答案<p>开合状态
$(this).parent().siblings("ul").slideToggle();//切换父级<ul>开合状态
$(this).siblings("li").slideToggle();//切换this同级<li>开合状态
var flag=0;
$(".common li").click(function(){
if(flag==0){
$(this).css("list-style-type","disc");
flag=1;
}else{
$(this).css("list-style-type","decimal");
flag=0;
}
});
});
最后就是这样了。
后来在网上查，toggle(fn,fn)还有一种替代方法，外接函数，例如
toggle(objs) {
$(objs).each(function(){
if ($(this).is(':hidden')) $(this).show(); else $(this).hide();
});
}
