隐藏/显示切换具有相同类名的单独div

我有一个UL列表，每个LI都有一个隐藏的DIV，以及一个显示隐藏DIV的“更多信息”链接。 但是，单击此按钮也会显示所有其他LI的隐藏DIV。

我怎样才能隐藏/显示LI中的DIV，而不是所有其他隐藏的DIV节目？

如果我点击一个我怎么能隐藏其他人？ 我想保留这部分，但以后我想删除它。

同样点击我希望“更多信息”链接中的文字更改为“隐藏”。

这是我目前的脚本：

$(window).load(function() { $('.grey_button a').toggle(function() { $('.job_description').slideDown(''); return false; }, function() { $('.job_description').slideUp(''); return false; }); }); 

Answer 1

以下jQuery应该工作：

 $('.grey_button a').toggle(function() { $(this).closest('li').find('.job_description').slideDown(); return false; }, function() { $(this).closest('li').find('.job_description').slideUp(); return false; }); 

假设HTML类似于以下内容：

 
 
Show more information 
Job information...
   

JS小提琴演示 。

顺便说一下，没有必要将空字符串传递给slideUp() / slideDown() ，而不传递参数（整数（毫秒数）或字符串）将使用默认值400毫秒。

参考文献：

• closest() 。
• find() 。

Answer 2

jQuery的：

  $('.grey_button a').click(function() { $(this).closest('li').find('.job_description').slideToggle(); }); 

CSS最初隐藏了作业信息：

  
 
Show more information 
Job information...
  

Answer 3

如果html结构是这样的::

 
 
 
Bala bala
 
More bla bla
 More Information 
 
 
Bala bala
 
More bla bla
 More Information 
 
 

那么Jquery Code对你的要求就是这样的

 $('_show-more-info').click(function(){ var thisAnchor = $(this); var ul = thisAnchor.parents('.main'); ul.find('.more-info').slideUp(); thisAnchor.sibling('.more-info').slideDown(); }); 

Answer 4

此代码将打开实际内容并隐藏所有其他内容：

   
 
short description  read more hide 
Here is more to read.
 
 
short description  read more hide 
Here is more to read.
 
 
short description  read more hide 
Here is more to read.
 
 
short description  read more hide 
Here is more to read.
 
 
​ 

Answer 5

您应该在访问li使用this上下文请尝试

 $(window).load(function() { $('.grey_button a').toggle(function() { //hide the other $('.grey_button a').not($(this)).find('.job_description').each(function(){ $(this).slideUp(); }) $('.job_description',this).slideDown(''); return false; }, function() { $('.job_description',this).slideUp(''); return false; }); }); 

Answer 6

在类上调用.slideUp()会将它们全部隐藏起来，然后只使用$(this)关键字来触发li的类。

尝试：

$('.grey_button a').toggle(function() { $('.job_description').slideUp(); $(this).parent().find('.job_description').slideDown(); return false; }

Answer 7

试试这个：

 $(window).load(function() { var $jobs = $('.job_description'); $('.grey_button a').click(function() { $closest = $(this).closest('li').find('.job_description'); $jobs.not($closest).slideUp(); $closest.slideDown(); return false; }); }); 

Answer 8

看看这个jsfiddle例子。

一瞥jqueryfunction…尝试：

 $('.top').on('click', function() { $parent_box = $(this).closest('.box'); $parent_box.siblings().find('.bottom').hide(); $parent_box.find('.bottom').toggle(); });