Question

我的页面中有四个按钮，点击其中每个按钮，它应该显示一个div，并且应该关闭打开的div。

我必须打开相应的div，但它不会关闭那些打开的。

以下是我到目前为止所做的代码http://www.bootply.com/DWw9JbGFex

提前感谢您的帮助。

Answer 1

使用jQuery绑定到collapse事件并隐藏其余的可折叠元素就可以了。见Boostrap javascript docs

function nest(array $data = array()) {
    $level = null;
    $last = null;
    foreach ($data as $index => $item) {
        $level = $level ?? $item['level'];
        if (null !== $last && $item['level'] > $level) {
            $data[$last]['items'][] = $item;
            unset($data[$index]);
        }
        if ($item['level'] == $level) {
            $last = $index;
        }
    }
    foreach ($data as $index => $item) {
        if (array_key_exists('items', $item)) {
            $data[$index]['items'] = nest($item['items']);
        }
    }

    return $data;
}

print_r(nest($data));die();

请参阅更新的bootply
http://www.bootply.com/5oGRhtqdfw

Answer 2

使用jquery / bootstrap简单隐藏/显示：

<强> HTML

        <button type="button" class="btn btn-primary div-toggler" name="div1">Expose Div 1</button>
        <button type="button" class="btn btn-primary div-toggler" name="div2">Expose Div 2</button>
        <button type="button" class="btn btn-primary div-toggler" name="div3">Expose Div 3</button>
        <button type="button" class="btn btn-primary div-toggler" name="div4">Expose Div 4</button>

        <div id="div1" class="target-div" style="display: none;" >Div 1</div>
        <div id="div2" class="target-div" style="display: none;" >Div 2</div>
        <div id="div3" class="target-div" style="display: none;" >Div 3</div>
        <div id="div4" class="target-div" style="display: none;" >Div 4</div>

<强>的JavaScript

$(document).ready(function () {
    $('.div-toggler').click(function (e) {
        var btnName = $(e.currentTarget).prop('name');
        $('.target-div').hide();
        $('#' + btnName).fadeIn(300);
    });
});

使用Bootstrap3崩溃div

2 个答案: