jquery - 如何使用简单的 css 和 jquery 显示内联帮助

Question

我正在设计一个包含多个帮助链接的页面。所有链接帮助将出现在同一位置。单击帮助链接我想显示 css 弹出窗口

示例我在带有 div 标签的页面上有两个帮助上下文

< div class="inlineExplaination"id="div1">

<a href="#">Help 1</a>

<div class="content">

    <h3>This is title</h3>
    <div class="block">
        <h4>What is this4>
        <p>This is... </p>
    </div>
</div>

< div class="inlineExplaination"id="Div1">

< a href="#"Help 2</a>

<div class="content">
    <h3>
        This is title</h3>
    <div class="block">
        <h4>What is that?</h4>
        <p>That is... </p>
    </div>
</div>

我的 jquery 看起来像这样

    $(document).ready(function () {
    $(".inlineExplaination").click(function () {
        var popID = $(this).attr('id'); 

        //Hide previous dialog
        $(".content").hide();

        //show the one which user clicked
        $('#' + popID).click(function () {
            $(this).children("div.content").addClass("active");
        });
    });

});

我单击页面上的链接以显示帮助，但没有任何反应。我认为问题是 onclick 我隐藏了所有内容类，然后我试图让用户点击的内容类处于事件状态。在这种情况下，当我点击“帮助”链接时它没有显示任何内容。我能够使其按预期工作，但我遇到了不一致的行为。

这是我的第一篇文章，也是第一次使用 jquery，所以请耐心等待。我的一个限制是无法访问任何互联网站点，这意味着我无法访问 google jquery UI 类。

谢谢 奇迹

Answer 1

你不需要另一个 .click()

 $(".inlineExplaination").click(function() {
    var popID = $(this).attr('id');
    $(".content").removeClass('active');
    $(this)
        .find("div.content")
        .addClass("active");

});

这是适合您的工作 fiddle :http://jsfiddle.net/yFEmD/

---

如果你想通过点击里面的链接来隐藏当前打开的 block ，你可以附加单独的处理程序。请注意，在您的代码中，“打开”事件附加到父 block ，因此单击链接也会为其触发 .click() 事件。这意味着它将被隐藏并立即显示。为避免这种情况，您需要添加 .stopPropagation() 调用。

这是一个说明这一点的 fiddle :http://jsfiddle.net/nev3rm0re/yFEmD/2/