根据选中的单选按钮展开和折叠手风琴答案

【问题标题】：Expand and collapse accordion based on checked radio button根据选中的单选按钮展开和折叠手风琴
【发布时间】：2016-07-02 20:28:12
【问题描述】：

我想根据上面按钮组中的选中值打开或关闭 Accordion 上的选项卡。

在我的应用程序中，每次我选择单选按钮时都会重新加载页面。

例如：如果我选择 1，那么 Collapsible Group #1 将打开，如果我选择单选按钮 #2，那么 Collapsible Group Item #2 将打开。

$(document).ready(function () {
    $("input[name='inlineRadioOptions']").click(function () {
        var checkedValue = $("input[name='inlineRadioOptions']:checked").val();
        console.log(checkedValue);
        if (checkedValue == "option1") {
            $("#collapseOne").collapse('show');
            $("#collapseTwo").collapse('hide');
        } else if (checkedValue == "option2") {
            $("#collapseOne").collapse('hide');
            $("#collapseTwo").collapse('show');

        } else {
            console.log("Oops.");
        }
    });
});

This is my jsfiddle

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

您在小提琴中的 JS 与您在问题中所说的不符。您需要将else if 中的graduate 更改为option2： https://jsfiddle.net/z49fxn6q/

$(document).ready(function () {

    $("input[name='inlineRadioOptions']").click(function () {
        var checkedValue = $("input[name='inlineRadioOptions']:checked").val();
        console.log(checkedValue);
        if (checkedValue == "option1") {
            $("#collapseOne").collapse('show');
            $("#collapseTwo").collapse('hide');
        } else if (checkedValue == "option2") {
            $("#collapseOne").collapse('hide');
            $("#collapseTwo").collapse('show');

        } else {
            console.log("Oops.");
        }
    });
});

【讨论】：