Question

我正在使用JQM，我有一种动态生成HTML的情况。有可能，甚至可能在页面上的多个位置使用相同的HTML。我有一个包含数据的div，我只想在用户点击标题div时显示。 IE：

<html>
<head>
<style>
</style>
<script src="/js/jquery.js"></script>
</head>
<body>
<div onclick="$(this).children('div:first').toggle();">This is Div 1</div>        
<div style="display:none">
<p>I'm hidden</p>
</div>
</div>
</body>
</html>

我想要做的是当用户点击Click Me链接时，孩子可以打开和关闭其显示。如果没有一些错综复杂的ID计划，有关如何实现这一点的任何想法？（我已经想到了至少两个）。

Answer 1

你可以将一个事件绑定到Click Me并在javascript / jquery中找到“this”之后的第一个子div（被点击的div）。像这样：

$(this).children("div:first");

Answer 2

根据您发布的代码，div包含＆＃34;我隐藏＆＃34;不是第一个div的孩子。

您可以使用$ .eq（）选择特定的子索引：https://api.jquery.com/eq/

<div onclick="$(this).children('div').eq(0).toggle();">
    This is Div 1
    <div style="display:none">
        <p>I'm hidden</p>
    </div>
</div>

查看工作JSFiddle（＆＃34;隐藏div＆＃34; Div1的孩子）

如果您需要切换兄弟的可见性，可以使用$ .siblings（）https://api.jquery.com/siblings/或$ .next（）https://api.jquery.com/next/

<div onclick="$(this).next().toggle();">
    This is Div 1
</div>
<div style="display:none">
    <p>I'm hidden and I'm a sibling</p>
</div>

请参阅JSFiddle2（Div1的隐藏div兄弟）

切换显示开/关

2 个答案: