jquery点击div标签显示另一个div文本

我有一个问题，关于jQuery的显示和隐藏文本时点击div或p标签。jquery点击div标签显示另一个div文本

例如：

<div class="title" style="background-color: Yellow; cursor: pointer"> 
     The League secretary and monitor ___ asked to make a speech at the meeting. 
     </div> 

     <div id="cont" style="display: none"> 
     答案B. 注： 先从时态上考虑。这是过去发生的事情应用过去时，先排除A.，C.。本题易误选D，因为The League secretary and monitor 好象是两个人，但仔细辨别， monitor 前没有the，在英语中，当一人兼数职时只在第一个职务前加定冠词。后面的职务用and 相连。这样本题主语为一个人，所以应选B。 

     </div>

JS代码：

 $(function() { 
     $(".title").click(function() { 
      $("#cont").toggle(200); 
     }); 

    });

现在的问题是，我有很多行，每行单击div.title，下面div.cont秀。

<div class="title_1" style="background-color: Yellow; cursor: pointer"> 
      title 1 
     </div> 

     <div id="cont_1" style="display: none"> 
     details 1 
      </div> 

       <div class="title_2" style="background-color: Yellow; cursor: pointer"> 
      title 2 
     </div> 
      <div id="cont_2" style="display: none"> 
      details 2 
      </div> 

       <div class="title_3" style="background-color: Yellow; cursor: pointer"> 
      title 3 
     </div> 
      <div id="cont_3" style="display: none"> 
      details 3 
      </div> 
      ........ may to title_50.

我不想一个接一个地使用jQuery的id搜索，然后js代码太长，不容易维护。

我可以使用$。每个类似的东西？

对此有何想法？

来源

2014-12-19 Jack.li

使用comman类.title为all title divs，并使用next() jQuery中

$(function() { 
     $(".title").click(function() { 
      $(this).next().toggle(200); 
     }); 

    });

DEMO

来源

2014-12-19 06:19:41 Balachandran

为了进一步的特殊性（如果dom改变）使用同级选择器的兄弟姐妹。 – 2014-12-19 06:34:33

哇，它的工作，非常感谢您的帮助 – 2014-12-19 07:09:27

@ Jack.li欢迎:) – Balachandran 2014-12-19 07:12:16

使用常见的类名称，而不是唯一的人，你可以使用一个遍历方法类似next()

$(".title").click(function() { 
    $(this).next().toggle(200); 
});

参考：next() API Docs

来源

2014-12-19 06:20:29 charlietfl

这真的是我需要的，非常感谢 – 2014-12-19 07:10:26

jquery点击div标签显示另一个div文本

回答

相关问题