Question

以下代码允许我在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>

Answer 1

您可以为所有$('.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;
});
});

Answer 2

在这种情况下，我认为你可能会减少你的代码：

$('.grey_button a').click(function(e) {
    e.preventDefault();
    $('.job_description').hide(); // Reset
    $(this).closest('.job_description').fadeToggle();
    $(this).toggleClass('open');
});

Answer 3

我会这样做：

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

FIDDLE

切换最近的div隐藏其他打开的div

3 个答案: