隐藏/显示切换具有相同类名称的单独div [英] Hide/show toggle separate divs with the same class name

问题描述

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

I've got a UL list, each LI has a hidden DIV, and a "More info" link that shows the hidden DIV. However, clicking this button shows all the other LI's hidden DIVs as well.

我如何只隐藏/显示LI中的DIV，所有其他隐藏的DIV的显示？

How can I only hide/show the DIV in the LI, and not have all the other hidden DIV's show?

如果我点击一个如何隐藏其他人？

And if I click on one how can I hide the others? I'd like to keep this part separate though in case I want to remove it later.

我也想点击更多信息链接中的文字来更改到隐藏。

Also on click I want the text in the "More info" link to change to "Hide".

这是我当前的脚本：

$(window).load(function() {

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

});

推荐答案

以下jQuery应该可以工作：

The following jQuery should work:

$('.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：

This assumes HTML similar to the following:

<ul>
    <li><span class="grey_button"><a href="#">Show more information</a></span>
        <div class="job_description">Job information...</div></li>
    <!-- other list items... -->
</ul>

JS Fiddle demo 。

顺便提一下，不需要传递一个空字符串到 slideUp code> / slideDown（），不传递参数（整数（以毫秒为单位的数字）或字符串），将使用默认值，

Incidentally, there's no need to pass an empty string to slideUp()/slideDown(), without an argument being passed (either an integer (number in millisecons), or a string) a default value will be used instead, of 400 milliseconds.

参考文献：

• closest（） 。


• a href =http://api.jquery.com/find/ =nofollow> find（） 。

• closest().
• find().

这篇关于隐藏/显示切换具有相同类名称的单独div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！