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

Question

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

如何仅隐藏/显示LI中的DIV，而不显示所有其他隐藏的DIV？

如果我单击其中一个，如何隐藏其他DIV？但我想将此部分保持独立，以防将来需要删除它。

此外，单击时，我希望“更多信息”链接中的文本更改为“隐藏”。

这是我当前的脚本：

$(window).load(function() {

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

});

- JV10

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：

<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演示。

顺便提一下，不需要传递空字符串给slideUp()/slideDown()，如果没有传递参数（无论是整数（以毫秒为单位）还是字符串），默认值将被使用，即400毫秒。

参考资料：

• closest()。
• find()。

- David Thomas

---

虽然点击链接时，+1 没有关闭其他已打开的选项卡，但它会增加一个新的选项卡。 - fragmentedreality

抱歉，我正在尝试使用这段代码，但是JS Fiddle中缺少display: none和display: block，请问有人可以添加我需要添加到上面的jQuery代码吗？谢谢。 - Chris

Answer 2

Jquery：

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

       });

CSS使职位信息最初隐藏:

     <ul>
       <li><span class="grey_button"><a href="#">Show more information</a></span>
      <div class="job_description" style="display:none" >Job information...</div></li>

    </ul>

- Learner_Programmer

Answer 3

如果HTML结构是这样的：

<ul class="main">
   <li>
        <p class="important-info">Bala bala</p>
        <p class="more-info" style="display:none;">More bla bla</p>
        <a class="_show-more-info">More Information</a>
   </li>
   <li>
        <p class="important-info">Bala bala</p>
        <p class="more-info" style="display:none;">More bla bla</p>
        <a class="_show-more-info">More Information</a>
   </li>
<ul>

那么您的需求所需的Jquery代码将是这样的

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

- Mayuresh

Answer 4

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

<style type="text/css">
.job_description { display: none; }

.grey_button.close span.hide,
.grey_button.open span.more { display: none; }

.grey_button.close span.more,
.grey_button.open span.hide { display: inline; }​
</style>
<script type="text/javascript" encoding="utf-8">
$(document).ready(function() {
    $('.grey_button.close').live('click', function() {
        $('.grey_button.open').click();
        $('.job_description').slideUp();
        $(this).siblings('.job_description').slideDown();
        $(this).toggleClass('close open');
        return false;
    });
    $('.grey_button.open').live('click', function() {
        $('.job_description').slideUp();
        $(this).toggleClass('close open');
        return false;
    });
});
</script>
<ul>
<li>short description
    <a class="grey_button close" href="#">
        <span class="more">read more</span>
        <span class="hide">hide</span></a>
    <div class="job_description">Here is more to read.</div>
</li>
<li>short description 
    <a class="grey_button close" href="#">
        <span class="more">read more</span>
        <span class="hide">hide</span></a>
    <div class="job_description">Here is more to read.</div>
</li>
<li>short description 
    <a class="grey_button close" href="#">
        <span class="more">read more</span>
        <span class="hide">hide</span></a>
    <div class="job_description">Here is more to read.</div>
</li>
<li>short description 
    <a class="grey_button close" href="#">
        <span class="more">read more</span>
        <span class="hide">hide</span></a>
    <div class="job_description">Here is more to read.</div>
</li>
</ul>​

- fragmentedreality

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;
  });

});

- Sethunath K M

Answer 6

试试这个：

$(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;
});

});

- Jack

Answer 7

在类上调用.slideUp()将隐藏它们所有，然后只需使用$(this)关键字来触发li中的类。

尝试：

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

- ahren

Answer 8

看看这个 jsfiddle 示例 在这里。

想要了解 jQuery 函数的概览...试试：

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

- Rabin Naga