Jquery 是否可以将此代码减少到更少？

我想知道我是否能把它分解成更少的代码

我将slidetoggle设置为页面的4个不同部分，每个div都有自己的id

我希望它可以精简为几行代码，因为每个div都有相同的滑动切换速度200

代码如下：

$(document).ready(function() {
  $('#our-future-intro-slide').click(function() {
    //$(".our-future-intro").delay(2400).slideDown(3600);
    $(".our-future-intro").slideToggle(200);
  });
  $('#strategic-planning-click').click(function() {
    $("#strategic-planning").slideToggle(200);
  });
  $('#student-learning-click').click(function() {
    $("#student-learning").slideToggle(200);
  });
  $('#institutional-assessment-click').click(function() {
    $("#institutional-assessment").slideToggle(200);
  });
});

---

可以在选择器中放置多个ID，并用逗号分隔。然后只需从所单击元素的ID中删除

-click

或

-slide

$(document).ready(function() {
  $('#strategic-planning-click,#student-learning-click,#institutional-assessment-click,#our-future-intro-slide').click(function() {
    var id = this.id.replace(/-click|-slide/, '');
    $("#" + id).slideToggle(200);
  });
});

---

编辑：

正如@Ben Blank所指出的，

。我们未来的简介

是一个类，而不是一个ID。如果您不能使用ID，则可以按如下方式修改上述代码：

$(document).ready(function() {
  $('#strategic-planning-click,#student-learning-click,#institutional-assessment-click,#our-future-intro-slide').click(function() {
    var selector = this.id.replace(/^(.+)(-click|-slide)$/, function(str,p1,p2) { return (p2 == '-click') ? '#' + p1 : '.' + p1; })
    $(selector).slideToggle(200);
  });
});

---

编辑：

根据您提供的代码示例，另一种选择是：

请注意，这取决于您的HTML结构是否与提供的一致。

$(document).ready(function() {
  $('#strategic-planning-click,#student-learning-click,#institutional-assessment-click,#our-future-intro-slide').click(function() {
    $(this).parent().next().slideToggle(200);
  });
});

---

一种方法是将所有对象放在一个数组中，并通过绑定进行循环，因为您使用相同的代码：

var objects = [ "our-future-intro", "strategic-planning", "student-learning", "institutional-assessment" ];

$.each(objects, function()
{
     $('#' + this + '-click').click(function() {
$("#" +  this).slideToggle(200);

})

---

});

我将依赖HTML结构来分配所有点击和滑动行为。只要这个约定成立，扩展它只是添加更多HTML的问题

$("h1, h3").each(function(i, heading) {
    $('a', this).click(function() {
        heading.next('div').slideToggle(200);
    });
});

假设内容结构如下（基于您的）：

满足于一个人
两个人的内容
三个人的内容
...

也许另外提供此脚本使用的HTML可能会为我们提供更多可能的答案：）Brad-我根据您的代码示例使用另一个解决方案更新了我的答案。只是一个问题，

我们未来的简介

是一个类而不是其他ID，这有什么原因吗？它似乎是页面上唯一的一个，因此ID似乎是合适的。看起来

-slide

案例应该查找类，而不是ID。

<div>
    <h1><a href="..">one</a></h1>
    <div>content for one</div>

    <div>
        <h3><a href="..">two</a></h3>
        <div>content for two</div>
    </div>

    <div>
        <h3><a href="..">three</a></h3>
        <div>content for three</div>
    </div>

    ...
</div>