javascript - 6 个网格 DIV，每个带有 2 个内容 DIV 和切换功能

Question

好吧，我可能只见树木不见森林 - 所以这是我的(可能很容易解决的)问题:

我有这个标记(6 倍“col-4”-DIV 内容):

<div class="partner inner">
 <div class="col-4">
  <div class="logo" id="logo-one"></div>
  <div class="caption hidden">
   <h3>Company One</h3>
   <address>
     Some Addressinfo here...
   </address>
  </div>
 </div>
</div>

CSS 情况: “logo”类中的每个 id 都有一个背景图像，可在悬停时垂直切换背景位置。 类标题通过 helper-class "hidden"默认隐藏

我想达到的目标: 使用 jQuery 将类“隐藏”切换为单击的 Logo 。 使用 jQuery 切换 div“标题”以显示每个公司的地址信息。

我对这段 jQuery 代码的问题:

        $(".logo").click(function(){
        $(".hidden").toggle(500);
        $(this).toggleClass("hidden");
    });

是所有 Logo 都消失了，只显示了点击的地址信息。

我怎样才能实现只有单击的 Logo 消失并显示单击 Logo 后面的地址信息？

我可能只是错过了一些简单的步骤，但我不想为每个 ID 编写 6 个点击功能 - 那会太乱，而且可能不是正确的方法，对吗？

Answer 1

问题是您要定位所有具有 .hidden 类的元素。 您需要定位与您刚刚单击的 Logo 相关的 .hidden 元素。 由于 .logo 和 .hidden 是 sibling ，您可以这样做:

$(this).siblings('.hidden').toggle(500);