Question

如何使手风琴不能默认扩展？当用户点击它时展开它。

然后，在展开之后，我想将标题从“显示”切换为“隐藏”。

这是我到目前为止所得到的。

HTML

<div class="accordion" id="accordion1">
    <div class="accordion-group">
        <div class="accordion-heading">

            <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
                Show
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                    In software, a stack overflow occurs when the stack pointer exceeds the stack bound. The call stack may consist of a limited amount of address space, often determined at the start of the program. The size of the call stack depends on many factors, including the programming language, machine architecture, multi-threading, and amount of available memory. When a program attempts to use more space than is available on the call stack (that is, when it attempts to access memory beyond the call stack's bounds, which is essentially a buffer overflow), the stack is said to overflow, typically resulting in a program crash.
                </div>
            </div>
        </div>
    </div>

JS

    <script type="text/javascript">

            $(function(){
    $(window).resize(function() {    // Optional: if you want to detect when the window is resized;
        processBodies($(window).width());
    });
    function processBodies(width) {
        if(width > 768) {
            $('.accordion-body').collapse('show');
        }
        else {
            $('.accordion-body').collapse('hide');
        }
    }
    processBodies($(window).width());
});




    </script>

Answer 1

要使手风琴默认折叠，请使用in类。

<div id="collapseOne" class="accordion-body collapse in">
    <!-- ... here it is .............................^^ -->
</div>

要更改可以打开/关闭它的文本，只需添加shown和hidden的事件监听器，然后根据当前正在发生的事件更新文本。

$(document).ready(function(){    
    $('#collapseOne').on('shown', function () {
       $("#showHide").text("Hide");
    });

    $('#collapseOne').on('hidden', function () {
       $("#showHide").text("Show");
    });
});

这是您更新的小提琴：http://jsfiddle.net/z2tNg/49/

Answer 2

默认情况下会隐藏折叠，但当屏幕为＆gt;时，您的jquery会将其设为show。 768px ..

您可以使用此代码切换隐藏/显示文字..

$('#collapseOne').on('hidden', function () {

  $('.accordion-toggle').text('Show');

});

$('#collapseOne').on('shown', function () {

  $('.accordion-toggle').text('Hide');

})

http://bootply.com/J5cGefBKE7

Answer 3

collapse 类将默认删除Accordion。

我已在此fiddle

中删除了它

HTML

<div class="accordion" id="accordion1">
    <div class="accordion-group">
        <div class="accordion-heading">

            <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
                Show
            </a>
        </div>
        <div id="collapseOne" class="accordion-body">
            <div class="accordion-inner">
                    In software, a stack overflow occurs when the stack pointer exceeds the stack bound. The call stack may consist of a limited amount of address space, often determined at the start of the program. The size of the call stack depends on many factors, including the programming language, machine architecture, multi-threading, and amount of available memory. When a program attempts to use more space than is available on the call stack (that is, when it attempts to access memory beyond the call stack's bounds, which is essentially a buffer overflow), the stack is said to overflow, typically resulting in a program crash.
                </div>
            </div>
        </div>
    </div>

如何使手风琴默认不扩展？

3 个答案: