6 个网格 DIV，每个具有 2 个内容 DIV 和切换功能答案

【问题标题】：6 Grid DIVs with 2 Content DIVs each and toggle-Function6 个网格 DIV，每个具有 2 个内容 DIV 和切换功能
【发布时间】：2016-01-21 22:24:12
【问题描述】：

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

我有这个标记（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 都有一个背景图像，它在悬停时垂直切换背景位置。类标题默认通过辅助类“隐藏”隐藏

我想要实现的目标：使用 jQuery 将“隐藏”类切换到单击的徽标。使用 jQuery 切换 div“标题”以显示每个公司的地址信息。

我对这个 jQuery 代码的问题：

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

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

如何实现只有点击的标志消失，点击标志后面的地址信息显示？

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

【问题讨论】：

$(this) 指的是什么？
嗯，我认为它一定是 .logo - 这就是为什么所有徽标在点击后都会消失。

标签： javascript jquery css

【解决方案1】：

你可以使用

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

甚至

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

这似乎有效，但不会隐藏 .logo-div 并且只显示 .caption-div。
你是否用我写的代码替换了整个代码？该行仅适用于 .hidden div 部分。你需要保留其余的.. $(".logo").click(function(){ $(this).siblings('.hidden').toggle(500); $(this).toggleClass("hidden" ); });
对不起，我的错。这实际上工作得很好。我可以在不破坏功能的情况下将 .caption 添加到 $(".logo").click(function() 吗？因为它也应该反过来工作（如果你点击地址信息，它应该再次翻转到徽标除非您点击他们网页的锚点）。
只需将 .caption 添加到 jquery 选择器，使其变为 $('.logo, .caption').click();