在我正在处理的应用程序中,它使用jQuery切换主要是打开和关闭Divs。我知道使用表演和隐藏也可以执行相同的效果。我在这个JSfiddle中有一个例子。这两种方法都比其他方法好吗?还是另一种方法更有效,更合规可以打开和关闭DIV,一次只允许一种打开?谢谢
还将我的应用程序移至使用Twitter引导程序,如果很重要
<div id="wrapper"> Toggle Method
<div id="action-buttons">
<a class="button" onclick="$('#boxone').toggle();$('#boxtwo').hide();return false;"><span>One</span></a>
<a class="button" onclick="$('#boxtwo').toggle();$('#boxone').hide();return false;"><span>Two</span></a>
</div>
<div id="boxone" style="display:none;">Box One</div>
<div id="boxtwo" style="display:none;">Box Two</div>
</div>
<div id="wrapper"> Show Hide Method
<div id="action-buttons">
<a class="button" onclick="$('#showboxone').show();$('#showboxtwo').hide();return false;"><span>One</span></a>
<a class="button" onclick="$('#showboxtwo').show();$('#showboxone').hide();return false;"><span>Two</span></a>
</div>
<div id="showboxone" style="display:none;">Box One</div>
<div id="showboxtwo" style="display:none;">Box Two</div>
</div>
我建议从html零件中删除样式和动作。
并且不要试图优化它:在这种基本的jQuery动作上没有性能问题,唯一重要的是代码的可读性:确保您的HTML,CSS和JavaScript显而易见。不要试图使太聪明的JavaScript:如果您无法立即看到它的作用,则存在可维护性问题的风险。并依靠ID,类和特定属性,而不是更改页面时不会跟上的订单属性。
这是我更改您的小提琴的方式:http://jsfiddle.net/prvm8/
html:
<div id="wrapper"> Toggle Method
<div id="action-buttons">
<span class="button1" target=boxone>One</span>
<span class="button1" target=boxtwo>Two</span>
</div>
<div id="boxone" class=box1>Box One</div>
<div id="boxtwo" class=box1>Box Two</div>
</div>
<div id="wrapper"> Show Hide Method
<div id="action-buttons">
<a class="button2" target=boxone><span>One</span></a>
<a class="button2" target=boxtwo><span>Two</span></a>
</div>
<div id="showboxone" class=box2>Box One</div>
<div id="showboxtwo" class=box2>Box Two</div>
</div>
javaScript:
$('.button1[target="boxone"]').click(function(){
$('#boxtwo').hide();
$('#boxone').toggle();
});
$('.button1[target="boxtwo"]').click(function(){
$('#boxone').hide();
$('#boxtwo').toggle();
});
$('.button2').click(function(){
$('.box2').hide();
$('#show'+$(this).attr('target')).show();
});
jsfiddle demo
; html: CSS: jQuery:<div class="wrapper"> Super method
<div class="action-buttons">
<a href="#"><span>One</span></a>
<a href="#"><span>Two</span></a>
</div>
<div class="box">Box One</div>
<div class="box">Box Two</div>
</div>
<div class="wrapper"> Super method
<div class="action-buttons">
<a href="#"><span>One</span></a>
<a href="#"><span>Two</span></a>
</div>
<div class="box">Box One</div>
<div class="box">Box Two</div>
</div>
.box{
display:none;
}
$('.action-buttons').on('click','a',function(e){
e.preventDefault();
var $allbox = $(this).closest('.wrapper').find('.box'),
$box = $allbox.eq( $(this).index() ),
doIt= ($box.is(':visible')) ? $box.slideUp() : ($allbox.slideUp()) ($box.slideDown());
});
我不知道在jQuery中有更好的方法,但是另一种方法是使用:
- jQuery UI手风琴
或 - jQuery UI选项卡。