0

次のコードを使用すると、LI 内の div を切り替えることができます。1 つの 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

すべてに対して 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;
});
});
于 2012-06-24T22:53:43.100 に答える
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 に答える
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 に答える