Javascript jQuery Accordion如何获取活动标题的enter选择按钮

我在对话框中使用手风琴来完成最终用户需要执行的不同步骤。每个步骤都有一个按钮或带有按钮的文本框。我如何获得它，以便当用户点击enter键时，它激活与活动标题相关的按钮

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

<div id="accordion">

    <h3 id="Step1">Step 1:</h3>
  <div>
    <p>
    To get started click "Setup" and it will configure this spreadsheet for use with the Connected Groups Add-on.
    </p>

    <p><button id="Step1B" class="action" onclick="step1()">Setup</button></p>
  </div>

  <h3 id="Step2">Step 2</h3>
  <div>
    <p>
    To get started enter the name of your first contact group below then click "Create". 
    </p>
    <p><input type="text" id="gName">
    <button id="Step2B" class="action" onclick="step2()">Create</button></p>
  </div>
  <h3  id="Step3">Done</h3>
  <div>
    <p><center>
    Thank you for using Connected Groups.  More information or help can be found:
    </center>
    </p>
    <p><button id="thankYou" onclick="step3()">Close</button></p>
  </div>

</div>

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

  <script>
 $(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content"
    });  
  }); // run on launch

  function step1(){
  alert("Step1");
  $('#Step2').click(); 
  };

    function step2(){
    var tb = $("#gName").val();
  alert("Step2: "+tb);
  $('#Step3').click(); 
  };

   function step3(){
  google.script.host.close();
  };

  </script>

步骤1：

要开始，请单击“设置”，它将配置此电子表格，以便与连接的组加载项一起使用。

设置

步骤2

要开始，请在下面输入第一个联系人组的名称，然后单击“创建”。


创造

多恩

感谢您使用连接的组。可以找到更多信息或帮助：

接近

$（函数（）{
$（“手风琴”）。手风琴({
高度样式：“内容”
});  
}); // 启动时运行
函数step1（）{
警报（“步骤1”）；
$（“#步骤2”）。单击（）；
};
函数step2（）{
var tb=$（“#gName”）.val（）；
警报（“步骤2:+tb）；
$（'步骤3'）。单击（）；
};
函数step3（）{
google.script.host.close（）；
};

我如何获得它，以便当用户点击回车键时，激活与活动标题相关的按钮

首先，我们可以捕捉输入元素的按键事件。如果按键是“回车”键，那么我们将向“活动”按钮发送一个

click（）

。我们将把它存储在一个全局变量中，

window.actionButton

$(':input').keyup(function (event) {
    if (event.keyCode == 13) {
        window.actionButton.click();
    }
});

activate: function (event, ui) {
    window.actionButton = ui.newPanel.find(".action");
},

如果我们假设每个面板包含一个带有

class='action'

的按钮，那么我们可以跟踪“活动”按钮

window.actionButton = ui.newPanel.find(".action");

每当选择标头（+面板）时，该事件将激发。在页面加载期间，我们将把一个函数绑定到该操作，并让它更新

window.actionButton

$(':input').keyup(function (event) {
    if (event.keyCode == 13) {
        window.actionButton.click();
    }
});

activate: function (event, ui) {
    window.actionButton = ui.newPanel.find(".action");
},

如果我们移动焦点以突出显示预期的操作，工作流将得到改进。理想情况下，焦点应该转到下一个输入，不管是什么，但在这个简单的手风琴中，移动到适当的按钮就足够了：

window.actionButton.focus();

不幸的是，在GoogleApps脚本HtmlService中运行时，我们可以以编程按钮单击为目标，但无法控制焦点：因此，您会发现JSFIDLE的运行方式与在HtmlService中不同

剧本

步骤1：
要开始，请单击“设置”，它将配置此电子表格，以便与连接的组加载项一起使用



步骤2
要开始，请在下面输入第一个联系人组的名称，然后单击“创建”


创造

多恩

感谢您使用连接的组。可以找到更多信息或帮助：


接近

/**
*加载文档时，设置accordion和事件处理程序
*/
$（函数（）{
$（“手风琴”）。手风琴({
高度样式：“内容”，
//通过设置新的“actionButton”来处理激活事件，
//并将其聚焦。
激活：功能（事件、用户界面）{
//警报（ui.newPanel.attr（'id'）；
window.actionButton=ui.newPanel.find（“.action”）；
window.actionButton.focus（）；
},
//对于创建事件也是如此
//这不能设定焦点-为什么不能？
创建：函数（事件、用户界面）{
//警报（ui.panel.attr（'id'）；
window.actionButton=ui.panel.find（“.action”）；
window.actionButton.focus（）；
}
});
//单击加载时指定的处理程序
$（'#Step1B'）。单击（函数（）{
警报（“步骤1”）；
});
$（'#Step2B'）。单击（函数（）{
var tb=$（“#gName”）.val（）；
警报（“步骤2:+tb）；
});
$（'#步骤3'）。单击（函数（）{
google.script.host.close（）；
});
//为所有输入设置按键事件处理程序
//如果按下“回车”，请单击当前操作按钮。
$（'：input'）.keyup（函数（事件）{
如果（event.keyCode==13）{
window.actionButton.click（）；
}
});
});

这实际上是使用htmlService的大型应用程序脚本的一部分。我只是把它删减到只显示相关的代码。对于拿走标签的管理员，我想保留它，因为HtmlService依赖于Caja，这是非常有限的，可能会影响答案。@Mogsdad是的，我知道部分来自GAS，但我认为他的问题在于javascript或jQuery，所以只要他的服务器端GAS脚本工作正常，就不需要该标签。但不管怎样，我就是这么想的。你可以留着它。干杯。你只是想按一下按钮打开下一台手风琴吗。。？如果是这样的话，可能有更好的方法来解决这个问题。@TJ我已经解决了下一个问题（单击），我只是不知道如何使它在Enter上工作。