Question

我正在尝试制作一个包含一些点的页面。

例如：

POINT1
POINT2
点3

这些点中的每一个都有一些隐藏的文本，直到我们点击它，然后它显示在它下面。

我在jquery中使用了slidetoggle效果，但我不知道如何指定只显示所选择的点。现在，当我按下任何一个时，它们都会同时打开。

我使用了这段代码：

$(document).ready(function(){
$(".point").click(function(){
$(".explanation").slideToggle("fast");
});
});

那么，有什么想法吗？

非常感谢。

Answer 1

$(document).ready(function(){
     $(this).click(function(){
      $(this).children(".explanation").slideToggle("fast");
    });
});

Answer 2

您需要找到与点击点相关联的explanation对象。您可以使用this在点击处理程序中获取点击的点。你没有向你展示HTML，所以我必须做一个例子来向你展示如何：

<div class="point>
    other HTML here
    <div class="explanation">
        This is the explanation for this point.
    </div>
</div>

$(document).ready(function(){
    $(".point").click(function(){
        $(this).find(".explanation").slideToggle("fast");
    });
});

如果您想要更具体的答案，请发布您的HTML，以便我们可以看到explanation对象与HTML中的point对象的关系。这假设解释在点对象内。如果它是兄弟姐妹，那将需要稍微不同的jQuery。

Answer 3

试

$(document).ready(function(){
$(".point").click(function(e){
$(e.srcElement).children(".explanation").slideToggle("fast");
});
});

如果.explanation元素不是.point使用$(e.srcElement.parentNode)

的子元素

Answer 4

它工作了:) 非常感谢你的帮助以下是有人需要的代码：

Html代码：

    <h1 class="point">AAAA</h1>
    <div class="explanation">
    <h3>XXXXX</h3>
    <p>....</p>
    </div>

JQuery代码：

 $(document).ready(function(){
    $(".point").click(function(){
        $(this).next.slideToggle("fast");
    });
});

的CSS：

    div.explanation,h1.point
    {
      margin:0px;
      padding:5px;
      text-align:center;
      background:#488AC7;
      border:solid 1px #F6358A;
     }
     div.explanation
     {
      height:120px;
      display:none;
     }

如何在jquery中使用多个类时选择选择器类型？

4 个答案: