使用 jQuery 单击事件以使用 "this" 切换页面上的元素

Question

我正在尝试使用点击事件来切换一个不是 selected 项目的子元素或父元素的元素。我需要使用 "this"，因为有几个不同的元素我想使用包含相同 class 的相同 jQuery 单击事件。我尝试了在 SO 上可以找到的所有其他解决方案，但 none 似乎对我有用。

这里是 HTML:

  <div class="container">
<div class="row name-header">
    <span class="col-xs-12">Tracy King</span>
</div>
  <div class="center" id="portrait-row">
    <img class="myFace" src="images/myface.jpg" alt="portrait">
  </div>
  <div class="col-xs-12 col-lg-8 col-lg-offset-2">
      <div class="row-panel">
          <p>About Me</p>
      </div>
  </div>
  <div class="col-xs-12 col-lg-8 col-lg-offset-2">
      <div class="content-panel">
          <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
              doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
              veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
              ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
              consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
              porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
              velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
              magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
              exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
              consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
              esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
              voluptas nulla pariatur?"
          </p>
      </div>
  </div>
  <div class="col-xs-12 col-lg-8 col-lg-offset-2">
      <div class="row-panel">
          <p>Code Samples</p>
      </div>
  </div>
  <div class="col-xs-12 col-lg-8 col-lg-offset-2">
      <div class="content-panel">
          <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
              doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
              veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
              ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
              consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
              porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
              velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
              magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
              exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
              consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
              esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
              voluptas nulla pariatur?"
          </p>
      </div>
  </div>
  <div class="col-xs-12 col-lg-8 col-lg-offset-2">
      <div class="row-panel">
          <p>Sample Apps</p>
      </div>
  </div>
  <div class="col-xs-12 col-lg-8 col-lg-offset-2">
      <div class="content-panel">
          <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
              doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
              veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
              ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
              consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
              porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
              velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
              magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
              exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
              consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
              esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
              voluptas nulla pariatur?"
          </p>
      </div>
  </div>
  <div class="col-xs-12 col-lg-8 col-lg-offset-2">
      <div class="row-panel">
          <p>Other Projects</p>
      </div>
  </div>
  <div class="col-xs-12 col-lg-8 col-lg-offset-2">
      <div class="content-panel">
          <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
              doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
              veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
              ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
              consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
              porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
              velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
              magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
              exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
              consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
              esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
              voluptas nulla pariatur?"
          </p>
      </div>
  </div>
</div>

这是我尝试使用的 jQuery 的最后一块：

$(document).on("click", ".more", function(event){
event.preventDefault();
$(this).closest('p').next('.show-more').toggle();

});

我更新了一个 fiddle 来展示代码的运行。每次我 select 行面板时，我都需要让内容面板滑动切换。提前致谢！

Answer 1

试试这个：

$(this).parent().next().children('.content-panel').slideToggle( 800 );

'.content-panel' 实际上不需要，但为了特殊性而添加。

因为您的代码结构非常简单，所以更容易向上遍历，然后再向下遍历。

Updated fiddle

Answer 2

试试这个：

$(document).on('click', '.your-class', function () {

    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
        // -
        $(this).slideUp();
    } else {
        $(this).addClass('active');
        // and apply animation styles to a class or animate with a code
        $(this).slideDown();
    }

    return false;
});