Fatal编程技术网
  • jquery/
  • 如何使单选按钮在JQuery UI手风琴中工作？

如何使单选按钮在JQuery UI手风琴中工作？

jquery jquery-ui

如何使单选按钮在JQuery UI手风琴中工作？,jquery,jquery-ui,jquery-ui-accordion,Jquery,Jquery Ui,Jquery Ui Accordion,我搜索过，有些人问过这个问题，但没有人给出充分的答案，大多数提问者没有提供有用的示例代码。我把它缩减为我正试图做但不起作用的事情。手风琴可以演奏，但单选按钮不行。有什么办法可以让这一切顺利进行吗 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqu

我搜索过，有些人问过这个问题，但没有人给出充分的答案，大多数提问者没有提供有用的示例代码。我把它缩减为我正试图做但不起作用的事情。手风琴可以演奏，但单选按钮不行。有什么办法可以让这一切顺利进行吗

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
    <title>Test</title>
    <script type="text/javascript">
      $(document).ready(
        function()
        {
            $('#mystuff').accordion(
            {
                header: "div.hdr",
                collapsible: true,
                heightStyle: "content"
            });
        }
      );
    </script>
  </head>
  <body>
    <form>
      <div id="mystuff">
        <div class="hdr">
          <span><input type="radio" name="r1" value="A" checked="checked" /></span>
          <span>Choose A</span>
          <span><input type="radio" name="r1" value="B" /></span>
          <span>Choose B</span>
        </div>
        <div>
          This is the body for 1.
        </div>
        <div class="hdr">
          <span><input type="radio" name="r2" value="A" checked="checked" /></span>
          <span>Choose A</span>
          <span><input type="radio" name="r2" value="B" /></span>
          <span>Choose B</span>
        </div>
        <div>
          This is the body for 2.
        </div>
      </div>
    </form>
  </body>
</html>


试验
$（文件）。准备好了吗(
函数（）
{
$（'mystaff'）。手风琴(
{
标题：“div.hdr”，
可折叠的：是的，
高度样式：“内容”
});
}
);
选择一个
选择B
这是我的身体。
选择一个
选择B
这是2人的身体。
编辑：大卫·托马斯的建议奏效了。下面是修改后的示例，已修复：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
    <title>Test</title>
    <script type="text/javascript">
      $(document).ready(
        function()
        {
            $('#mystuff').accordion(
            {
                header: "div.hdr",
                collapsible: true,
                heightStyle: "content"
            });
            $('input[type=radio],label').on('click',function(e){e.stopPropagation();});
        }
      );
    </script>
  </head>
  <body>
    <form>
      <div id="mystuff">
        <div class="hdr">
          <span><input id="r1a" type="radio" name="r1" value="A" checked="checked" /></span><label for="r1a">Choose A</label>
          <span><input id="r1b" type="radio" name="r1" value="B" /></span><label for="r1b">Choose B</label>
        </div>
        <div>
          This is the body for 1.
        </div>
        <div class="hdr">
          <span><input id="r2a" type="radio" name="r2" value="A" checked="checked" /></span><label for="r2a">Choose A</label>
          <span><input id="r2b" type="radio" name="r2" value="B" /></span><label for="r2b">Choose B</label>
        </div>
        <div>
          This is the body for 2.
        </div>
      </div>
    </form>
  </body>
</html>


试验
$（文件）。准备好了吗(
函数（）
{
$（'mystaff'）。手风琴(
{
标题：“div.hdr”，
可折叠的：是的，
高度样式：“内容”
});
$（'input[type=radio]，label'）。在（'click'，函数（e）{e.stopPropagation（）；}）上；
}
);
选择一个
选择B
这是我的身体。
选择一个
选择B
这是2人的身体。
这里有一个选项：

$('div.hdr span').click(function(e){
    // stops the click event bubbling/propagating beyond the span
    e.stopPropagation();
    // finds the previous span,
    // finds the radio input in that span (if there is one)
    // and checks it (though you should use the label element for this, really
    $(this).prev('span').find('input:radio').prop('checked', true);
});
.

我忘了提到：在我最初尝试在中执行此操作的代码中，我有一个用于输入的onclick事件处理程序。我在Firebug中的hander中设置了一个断点，当它停止时，另一个收音机被单击，并通过我的事件处理程序保持该状态。我走出它，jquery.js中的某个东西将它调回，但我不明白它是什么。我认为Firebug在jquery的事件处理程序中会感到困惑。我知道我会的。如果你忘记了一些事情编辑你的文章并添加它，你可以在你的文章底部看到编辑选项！我已经在最初的帖子中添加了我的原始示例代码的工作版本，这样以后阅读这个问题的人就可以更容易地看到它是如何工作的。我本来会投票赞成你的答案，但显然，我还不能这么做。