压缩 jQuery 滑动切换功能

Question

我是 jQuery 的新手，所以请提前见谅。

我正在制作一个常见问题解答页面，我正在使用 jQuery 在点击时将 div 切换为 open/close...我的第一个问题是试图压缩数量正在使用的代码数量，正如您在下面列出的代码示例中所见，也在 jsfiddle！有相当数量的 JS，每个 div 都有一个单独的 id，有点乱。

非常感谢。

$('#logon').click(function()
 {
  $('.logonanswer').slideToggle("fast");
  $('.ecrfanswer').hide(1000);
 });
 $('#ecrf').click(function()
 {
  $('.ecrfanswer').slideToggle("fast");
  $('.logonanswer').hide(1000);
 });
 $('#user').click(function()
 {
  $(".user").slideToggle("fast");
 });
 $('#password').click(function()
 {
  $(".password").slideToggle("fast");
 });
 $('#memorable').click(function()
 {
  $(".memorable").slideToggle("fast");
 });
 $('#disabled').click(function()
 {
  $(".disabled").slideToggle("fast");
 });
 $('#training').click(function()
 {
  $(".training").slideToggle("fast");
 });
 $('#ecrftest').click(function()
 {
  $(".ecrftest").slideToggle("fast");
 });
 $('#dropdown').click(function()
 {
  $(".dropdown").slideToggle("fast");
 });
 $('#check').click(function()
 {
  $(".check").slideToggle("fast");
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<article style="text-align:left;">
 <h1>Please select your issue</h1>

 <button class="btn btn-b btn-ba icon-key" id="logon">Issues logging in to Syneclin.net</button>
 
 <div class="logonanswer" style="display:none;">
  <p class="expand">
   <li class="lst lst-b lst-ba icon-go" id="user">I have lost my User ID</li>
    <p class="user" style="display:none;">Insert some blurb here about user ID's</p>
   <li class="lst lst-b lst-ba icon-go" id="password">I have lost my Password</li>
    <p class="password" style="display:none;">Insert some blurb here about user ID's</p>
   <li class="lst lst-b lst-ba icon-go" id="memorable">I have lost my Memorable Data</li>
    <p class="memorable" style="display:none;">Insert some blurb here about user ID's</p>
   <li class="lst lst-b lst-ba icon-go" id="disabled">My account has been disabled</li>
    <p class="disabled" style="display:none;">Insert some blurb here about user ID's</p>
   <li class="lst lst-b lst-ba icon-go" id="training">Training??</li>
    <p class="training" style="display:none;">Insert some blurb here about user ID's</p>
  </div>
 </div>

 <button class="btn btn-b btn-ba icon-page" id="ecrf">Issues entering data / accessing eCRF's</button>

 <div class="ecrfanswer" style="display:none;">
  <div class="expand">
   <li class="lst lst-b lst-ba icon-go" id="ecrftest">eCRF Test Page</li>
    <p class="ecrftest" style="display:none;">Insert some blurb here about user ID's</p>
   <li class="lst lst-b lst-ba icon-go" id="dropdown">I can't delete information in a dropdown menu</li>
    <p class="dropdown" style="display:none;">Insert some blurb here about user ID's</p>
   <li class="lst lst-b lst-ba icon-go" id="check">I can't remove a check from a checkbox</li>
    <p class="check" style="display:none;">Insert some blurb here about user ID's</p>
  </div>
 </div>
 
 <div class="footer">
  
 </div>
</article>

Answer 1

我已经更新了你的fiddle：http://jsfiddle.net/qLcxquje/5/

代码如下：

$(function(){
    // a list of ids also used as classes
    var listOfIds = ["user", "password", "memorable", 
                     "disabled", "training", "ecrftest", 
                     "dropdown",  "check" ];

    $('#logon').click(function()
    {
        $('.logonanswer').slideToggle("fast");
        $('.ecrfanswer').hide(1000);
    });

    $('#ecrf').click(function()
    {
        $('.ecrfanswer').slideToggle("fast");
        $('.logonanswer').hide(1000);
    });

    // convert JavaScript array to a jQuery array
    var jqueryArr = $.makeArray(listOfIds);
    // map each id to it's corresponding class 
    // and bind the click functionality
    $.map(jqueryArr, function(value, index) {
         $("#" + value).click(function()
         {
            $("." + value).slideToggle("fast");
         });
    });
});

幸好您的 ID 与其对应的类匹配，否则此代码段将无法运行。参考我在explanation/functionality的代码上添加的注释。我将 JavaScript 数组转换为 jQuery 对象，以便我可以使用 jQuery 的 map 功能。

这是另一个不使用 id 数组的答案 (jsfiddle):

// another solution without the id array
$(function(){
    $('#logon').click(function()
    {
        $('.logonanswer').slideToggle("fast");
        $('.ecrfanswer').hide(1000);
    });

    $('#ecrf').click(function()
    {
        $('.ecrfanswer').slideToggle("fast");
        $('.logonanswer').hide(1000);
    });

    // gets the div (the one with expand class) 
    // under the div with class name logonanswer 
    var childDivOfLogonAnswer = $(".logonanswer").children().first();   
    // iterates on all li children only
    $.each(childDivOfLogonAnswer.children('li'), function(index, value) {
        // get the id
        var id = $(value).attr('id');
        // attach click
        $("#" + id).click(function()
        {
            $("." +id).slideToggle("fast");
        });
    });    

    $.each($(".ecrfanswer").children().first().children('li'),
     function(index, value) {
        // get the id
        var id = $(value).attr('id');
        // attach click
        $("#" + id).click(function()
        {
            $("." +id).slideToggle("fast");
        });
    });
});

不要忘记将 <p class="expand">（在 <div class="logonanswer" style="display:none;"> 下）更改为 <div class="expand"> 以使此代码片段正常工作

压缩 jQuery 滑动切换功能

Condensing jQuery slidetoggle function

jquery

slidetoggle