Question

好吧，我可能没有看到树木 - 所以这是我的（可能很容易解决）问题：

我有这个标记（6倍＆＃34; col-4＆＃34; -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情况：来自班级的每个id＆＃34; logo＆＃34;有一个背景图像，在悬停时垂直切换背景位置。通过helper-class＆＃34; hidden＆＃34;

默认隐藏类标题

我想要实现的目标：使用jQuery切换Class＆＃34; hidden＆＃34;点击徽标。使用jQuery来切换div＆＃34; caption＆＃34;显示每家公司的地址信息。

我对这个jQuery代码的问题：

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

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

如何才能实现只有点击的徽标消失并且点击徽标后面的地址信息才会显示？

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

Answer 1

您可以使用

$(this).next('.hidden')

甚至

$(this).parent().find('.hidden')

Answer 2

问题是您要使用类.hidden定位所有元素。您需要定位与您刚刚点击的徽标相关的.hidden元素。由于.logo和.hidden是兄弟姐妹，您可以这样做：

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

6个网格DIV，每个DIV有2个内容DIV和toggle-Function

2 个答案: