Question

我正在尝试创建一个网页，在这个页面中，我希望有5个div。我做了一个翻转面板，所以当我点击标题时，必须出现其余的文字。第一个div工作，但当我点击第二个标题时，其余部分不会出现。

这是我正在使用的脚本：

<script>
$(document).ready(function){
$("#flip").click(function(){
$("#panel").slideToogle("slow");
});
});
</script>

这是我的CSS代码：

    #panel,#flip
{
padding:0px;
text-align:center;
background-color:#C0C0C0  ;
border:solid 3px #C0C0C0 ;
border-radius:25px;
width: 800px;

}
#panel
{
padding:6px;
display:none;
}

这是HTML部分：

<center>
<div id="flip"><h3>title</h3></div>
<div id="panel">
 etc etc etc...some text here
</div></center>
<br>
<center>
<div id="flip"><h3>title</h3></div>
<div id="panel">
etc etc etc
 </div></center>

为什么你认为第一个是工作而第二个不是？谢谢！

Answer 1

您在同一页面中使用多个ID（它们应该是唯一的），换句话说，您不能在同一页面中拥有多个ID。为了使其有效，您需要将其更改为class="flip"和class="panel"。我更改了HTML和JS的部分内容。

您可能需要对CSS进行一些小的更改。

某些建议，不要使用<CENTER>标记，不推荐使用。

你也拼错了slideToggle。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>

    <!-- javascript/jQuery -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


</head>
<style>

    .panel, .flip {
        padding: 0px;
        text-align: center;
        background-color: #C0C0C0;
        border: solid 3px #C0C0C0;
        border-radius: 25px;
        width: 800px;

    }

    .panel {
        padding: 6px;
        display: none;
    }

</style>
<body>

<center>
    <div class="flip"><h3>title</h3>

        <div class="panel">
            etc etc etc...some text here
        </div>
    </div>
</center>
<br>
<center>
    <div class="flip"><h3>title</h3>

        <div class="panel">
            etc etc etc
        </div>
    </div>
</center>

<script>
    $(document).ready(function () {
        $(".flip").on('click', function () {
            $(this).children(".panel").slideToggle("slow");
        });
    });
</script>
</body>
</html>

Answer 2

将翻盖和面板更改为类而不是id。类用于将共享属性应用于多个元素。 Id是针对奇异元素的。

如果多个元素具有相同的Id，则jQuery只会尊重第一个元素。

使用jquery的翻转面板

2 个答案: