Question

如何仅对单击的DIV应用.toggle（）。我当前的代码适用于所有切换div。代码在<div class="toggled">

的内容之间切换

我需要在版本1.4

中执行此操作

任何人都可以帮助我？

这是我的代码：

<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="card.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
    $(function() {
        $('#toggle').click("click", function() {
            $('.toggled').toggle();
            return false;
        });
    });

</script>
</head>

<body>


<div class="card">

    <div class="toggled">
    <h3>FRONT 1</h3>
    </div>

    <div class="toggled" style="display:none;">
    <h3>BACK 1</h3>
    </div>

    <a href="#" id="toggle">Switch Text Toggle</a><br/>

</div>


<div class="card">

    <div class="toggled">
    <h3>FRONT 2</h3>
    </div>

    <div class="toggled" style="display:none;">
    <h3>BACK 2</h3>
    </div>

    <a href="#" id="toggle">Switch Text Toggle</a><br/>

</div>

</body>
</html>

提前致谢！

Answer 1

您需要将主持人的ID更改为类，因为ID是唯一的。

然后你做：

$(function() {
    $('.toggle').on("click", function() {
        $(this).siblings('.toggled').toggle();
        return false;
    });
});

在哪里找到带有班级.toggled的点击锚的兄弟姐妹，并切换它们。您还需要document.ready函数，并且事件处理程序有一些拼写错误。

使用更新版本的jQuery，1.4已过时。

FIDDLE

Answer 2

将$('.toggled').toggle();替换为$(this).toggle();。您当前正在请求切换所有.toggle个容器，而不是该事件的焦点。

Answer 3

试试这个：

$('.card #toggle').click(function() {
            $('.toggled').toggle();
            return false;
        });

如何仅在DIV中应用.toggle（）

3 个答案: