Question

嘿，我已经设法提供了一些javascript，当点击一个div时，它将打开一个面板并关闭其他打开的面板。代码有效，但我知道有一种更简洁的方法，就好像我的菜单有100个元素，javascript会很大。

如何使用相同的功能但可扩展？

HTML

<div class="type" id="flip1">Button</div>
<div class="info" id="panel1"><p>Lorem ipsum.</p></div>
<div class="type" id="flip2">Button</div>
<div class="info" id="panel2"><p>Lorem ipsum.</p></div>
<div class="type" id="flip3">Button</div>
<div class="info" id="panel3"><p>Lorem ipsum.</p></div>

的Javascript

$(document).ready(function(){
  $("#flip1").click(function(){
$("#panel1").slideDown("slow");
    $("#panel2").slideUp("slow");
$("#panel3").slideUp("slow");
  });
});

$(document).ready(function(){
  $("#flip2").click(function(){
$("#panel2").slideDown("slow");
    $("#panel1").slideUp("slow");
$("#panel3").slideUp("slow");
  });
});

$(document).ready(function(){
  $("#flip3").click(function(){
$("#panel3").slideDown("slow");
    $("#panel1").slideUp("slow");
$("#panel2").slideUp("slow");
 });

}）

Answer 1

应该这样做......

$(".type").click(function(){ /* when any .type is clicked ... */
     $(".info").slideUp("slow"); /* ...close all of the .info's... */
     $(this).next().slideDown("slow"); /* ...open the closest (next in the DOM) .type. $(this) refers to the element that triggered the event ie. the element that was clicked */
});

DEMO

Answer 2

我建议使用jquery并对元素执行forEach或者更进一步使用某种类似Angular或Ember的MVC框架来提供组件和forEach之类的东西，这样你就可以将它作为组件重用，有一个组件列表，以及每个组件。

Answer 3

默认隐藏所有.info。

$(".type").click(function(){
    $(this).next().slideToggle("slow").siblings('.info').slideUp("slow");
});

Newby Javascript - 如何在代码中停止重复

3 个答案: