javascript - 使 jquery 切换与动态内容一起工作

Question

我的网站上有以下代码:http://jsfiddle.net/dJLK3/1/如您所见，它工作得很好。

问题是:那些 div 和链接触发器来自数据库。今天我有 1 个，明天可能是 10 个...

我无法弄清楚如何转换它并使其工作而不需要正确的大量代码，如 link1、link2、link3、link4、link5 等等......

有人吗？ :)

Answer 1

使用data 属性和jQuery.data。 reference

更新:
根据 this评论。

html

<div class="menu">
    <a href="#" class="link" data-slide-content="div1">Link1</a>
    <a href="#" class="link" data-slide-content="div2">Link2</a>
</div>
<div id="div1" class="slide"></div>
<div id="div2" class="slide"></div>​

js

$('.menu').on('click', '.link', function(){
    var id = $(this).data('slideContent');
    $('.slide').not('#' + id).slideUp(function() {
        $('#' + id).slideToggle();
    });
});

CSS

.slide {
    display: none;
    height: 100px;
    width: 100px;
    position: fixed;
    top: 30px;
}

demo

引用资料:

• slideUp - http://api.jquery.com/slideUp/
  
• slideToggle - http://api.jquery.com/slideToggle/