0

以下代码允许我切换 LI 内的 div，我如何调整它以便当一个 div 打开时，兄弟 LI 内的所有其他 div 都关闭？

$(document).ready(function () {  
$('.grey_button a').toggle(function() {
    $(this).closest('li').find('.job_description').fadeIn(0);
    $(this).toggleClass('open');
    //$(this).text($(this).text() == 'More Information' ? 'Hide Information' : 'More Information');
    return false;
},
    function() {
      $(this).closest('li').find('.job_description').fadeOut(0);
      $(this).toggleClass('open');
      //$(this).text($(this).text() == 'Hide Information' ? 'More Information' : 'Hide Information');
    return false;
  });
});

HTML 示例

<ul>
  <li>
    <div class="grey_button"><a href="" class="arrow">More information</a></div>
    <div class="job_description" style="display: none; ">
      Lorem ipsum
    </div>
  </li>
  <li>
    <div class="grey_button"><a href="" class="arrow">More information</a></div>
    <div class="job_description" style="display: none; ">
      Lorem ipsum
    </div>
  </li>
  <li>
    <div class="grey_button"><a href="" class="arrow">More information</a></div>
    <div class="job_description" style="display: none; ">
      Lorem ipsum
    </div>
  </li>
</ul>
4

3 回答 3

1

您可以为 all 添加一个查找$('.job_description').hide()。

如果这会影响具有相同类的页面的其他部分：

$('.grey_button a').toggle(function() { /* cache parent el */
    var $parent = $(this).closest('li'),
        $list = $parent.parent();
    $list.find('.job_description').hide();
    $list.find('.open').removeClass('open')

    $parent.find('.job_description').fadeIn(0);

    $(this).toggleClass('open');
    //$(this).text($(this).text() == 'More Information' ? 'Hide Information' : 'More Information');
    return false;
}, function() {
    $(this).closest('li').find('.job_description').fadeOut(0);
    $(this).toggleClass('open');
    //$(this).text($(this).text() == 'Hide Information' ? 'More Information' : 'Hide Information');
    return false;
});
});
于 2012-06-24T22:53:43.100 回答
0

在这种情况下，我认为您可以大大减少代码：

$('.grey_button a').click(function(e) {
    e.preventDefault();
    $('.job_description').hide(); // Reset
    $(this).closest('.job_description').fadeToggle();
    $(this).toggleClass('open');
});
于 2012-06-24T22:55:44.063 回答
0

我会做：

$(document).ready(function () {  
    $('.grey_button a').on('click', function(e) {
        e.preventDefault();
        $('.job_description').not($(this).closest('li').find('.job_description')).hide();
        $(this).toggleClass('open').parent('div').next('.job_description').toggle();
    });
});​

小提琴

于 2012-06-24T23:48:52.417 回答