Question

我期待按下按钮后，<div id="dni">会出现，但是没有任何变化。怎么了？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <script>
            function show_dni(){
                $("#dni").toggle();
            }
        </script>

    </head>
    <body>
        <div class="container">
            <br><br>
            <button class="btn btn-primary" onclick="show_dni()">Ver cliente</button>
            <div id="dni" class="hidden">
                DNI: <input type="text" name="id">
            </div>
        </div>
    </body>
</html>

奇怪的是，这个相同的代码在Fidd http://jsfiddle.net/wmL1zt7L/

上按预期工作

Answer 1

嘿，这是一个如何使用它的例子。 https://jsfiddle.net/se4er462/

我认为在你的班级中你使用了可见性属性而不是显示。切换时将显示更改为无阻止，反之亦然

正确的课程：

.hidden{
    display:none;
}

编辑/添加：

bootstrap hidden类将元素visibilty定义为

.hidden{
   display:none!important;
}

因此，切换功能将无法更改。如果显示器没有重要信息，那么切换器就可以工作了。

Answer 2

我没有使用jquery和Bootstrap的隐藏类，而是使用Bootstrap的崩溃类获得了相同的效果。

<div class="container">
    <br><br>
    <button class="btn btn-primary" data-toggle="collapse" data-target="#dni">Ver cliente</button>
    <div id="dni" class="collapse">
        DNI: <input type="text" name="id">
    </div>
</div>

单击按钮后<div>不显示

2 个答案: