javascript - 自动折叠可折叠 block

Question

我检查了一下网站，没有找到完整的答案，但是如何通过 if 语句自动折叠可折叠 block 。 这是我目前的 if 语句的一部分。

$(document).ready(function() {

    $("#testRun").click(function(){

    alert("start");
    var output = "";

    var num1 = "";
    var num2 = "";
    var num3 = "";
    var num4 = "";
    var num5 = "";
    var countnum4 = 0;
    var countnum5 = 0;

    if($('#radio1').is(':checked'))
    {
        num1 = "First Number ";
        $('#blockId').trigger('collapse');
    }
    else if($('#radio2').is(':checked'))
    {
        num1 = "Second Number";
    }
    else if($('#radio3').is(':checked'))
    {
        num1 = "Third";
    }
    else if($('#radio4').is(':checked'))
    {
        num1 = "Fourth";
    }
    else if($('#radio5').is(':checked'))
    {
        num1 = "Fifth";
    }
    else if($('#radio6').is(':checked'))
    {
        num1 = "Sixth";
    }
    else
        num1 = "No numbers selected"//If else for num1 selection


    output = "Your order has been sent. Here are the details of what you ordered"
            + "<br />Number 1: " + num1
            + "<br />Number 2: " + num2
            + "<br />Number 3: " + num3
            + "<br />Number 4: " + num4
            + "<br />Number 5: " + num5;

    $('#show').html(output);

});
});

我需要这个才能工作，所以一旦人们点击单选按钮，他们就会希望该 block 崩溃并打开一个新 block 。我知道它可能与事件监听器有关，但我只是不知道如何实现它。 编辑:我已经添加了我目前正在使用的大部分代码，以便更容易理解我正在尝试做什么。下面是相应的可折叠 block

<div data-role="collapsible-set" id="blockId">
        <div data-role="collapsible" data-collapsed="false" >
          <h3>Numbers</h3>
          <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
              <legend>Option</legend>
              <input type="radio" name="radio" id="radio1" value="" />
              <label for="radio1">First Number</label>
              <input type="radio" name="radio" id="radio2" value="" />
              <label for="radio2">Second Number</label>
              <input type="radio" name="radio" id="radio3" value="" />
              <label for="radio3">Third Number</label>
              <input type="radio" name="radio" id="radio4" value="" />
              <label for="radio4">Fourth Number</label>
              <input type="radio" name="radio" id="radio5" value="" />
              <label for="radio5">Fifth Number</label>
              <input type="radio" name="radio" id="radio6" value="" />
              <label for="radio6">Sixth Number</label>
            </fieldset>
          </div>
        </div>
      </div> 

如有任何帮助，我们将不胜感激。

Answer 1

这是load 事件的处理程序。在内部，我们为 #radio 定义了一个 change 处理程序。在其中我使用了您与我们共享的代码。请注意，$(this) 是 radio 元素，因为它在 radio 元素的 change 处理程序中使用。另请注意，此时 num1 需要存在。

$(function() {
    $('#radio1').change(function() {
        if($(this).is(':checked')) {
            num1 = "First Number";
            $('#blockID').trigger('collapse');
        }
    });
});