单击事件时隐藏父div

Question

我有列表透视-列表项博客，Case_Studies，白皮书与各自的class.on单击列表项它显示相应的元素在‘.page- ie.If’我单击博客它只显示博客和隐藏other.If我单击白皮书它只显示白皮书和隐藏others.In白皮书我有四个‘.page-透视’我只显示白皮书，博客和案例的前三个元素。

我想隐藏“.view-row”，但现在我隐藏了代码中提到的包装器部分。

​

(function($) {
  function perspective_type() {
    $(".perspective-list a").click(function(e) {
      e.preventDefault();
      $(".perspective-list a").parent().removeClass('active');
      $('.wrapper .page-perspective').slice(0,3).show();
      var href = $(this).attr('href');
      $('.wrapper > :not(.' + href + ')').hide();
      $('.wrapper > .' + href + '').slice(0,3).show();
      $(this).parent().addClass('active');
    });
    $(".perspective-list a").mouseover(
      function() {
        $(".perspective-list a").removeClass('hover');
        $(this).parent().addClass('hover');
      });
    $(".perspective-list a").mouseout(
      function() {
        $(".perspective-list a").each(function() {
          $(this).parent().removeClass('hover');
        });
      });
    $('#perspectives .perspectiveReadurl', '#page_perspectives .perspectiveReadurl').find('a').attr('target', '_blank');
  }
  jQuery(document).ready(function($) {
    $('.Whitepapers').slice(0,4).show();
    perspective_type();
  });

})(jQuery)

.views-row{
  height:50px;
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page_perspectives">
  <div class="view view-page-perspectives view-id-page_perspectives">
    <div class="perspective-list">
      <ul class="nav nav-justified">
        <li class="">
          <a class="Blogs" href="Blogs">Blogs</a>
        </li>
        <li>
          <a class="Case_Studies" href="Case_Studies">Case Studies</a>
        </li>
        <li class="active">
          <a class="Whitepapers" href="Whitepapers">Whitepapers</a>
        </li>
      </ul>
    </div>
    <div class="view-content">
      <div class="views-row views-row-1 views-row-odd views-row-first">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: none;">
            Whitepaper 1
          </div>
        </div>
      </div>
      <div class="views-row views-row-2 views-row-even">
        <div class="wrapper">
          <div class="page-perspective row Blogs" style="display: none;">
            Blogs 1
          </div>
        </div>
      </div>
      <div class="views-row views-row-3 views-row-odd">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: none;">
            Whitepaper 2
          </div>
        </div>
      </div>
      <div class="views-row views-row-4 views-row-even">
        <div class="wrapper">
          <div class="page-perspective row Case_Studies" style="display: none;">
            Case study 1
          </div>
        </div>
      </div>
      <div class="views-row views-row-5 views-row-odd">
        <div class="wrapper">
          <div class="page-perspective row Blogs" style="display: none;">
            Blogs 2
          </div>
        </div>
      </div>
      <div class="views-row views-row-6 views-row-even">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: none;">
            Whitepaper 3
          </div>
        </div>
      </div>
      <div class="views-row views-row-7 views-row-odd views-row-last">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: none;">
            Whitepaper 4
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​

Answer 1

正如您所提到的，所有代码都是动态到来的，并且您有一些views-row部分的高度，因此您希望隐藏views-row部分而不是内部元素部分。为此，您必须执行以下操作。

1. 在加载时删除内部元素的所有默认样式属性。
2. 现在它变为可见的所有元素，因此隐藏所有views-row元素。
3. 根据您的要求，对Whitepapers部分进行切片，找到它各自的父views-row并将其显示出来。单击每个链接后，您必须找到父元素的父元素并显示/隐藏元素。H213G214

我已经在下面的代码片段中实现了上述步骤。

​

(function($) {
  function perspective_type() {
    $(".perspective-list a").click(function(e) {
      e.preventDefault();
      $(".perspective-list a").parent().removeClass('active');
      //$('.wrapper .page-perspective').slice(0,3).show(); /*Not sure what this line is doing. no need of this.*/
      var href = $(this).attr('href');
      $('.wrapper > :not(.' + href + ')').parent().parent().hide();
      $('.wrapper > .' + href + '').slice(0,3).parent().parent().show();
      $(this).parent().addClass('active');
    });
    $(".perspective-list a").mouseover(
      function() {
        $(".perspective-list a").removeClass('hover');
        $(this).parent().addClass('hover');
      });
    $(".perspective-list a").mouseout(
      function() {
        $(".perspective-list a").each(function() {
          $(this).parent().removeClass('hover');
        });
      });
    $('#perspectives .perspectiveReadurl', '#page_perspectives .perspectiveReadurl').find('a').attr('target', '_blank');
  }
  jQuery(document).ready(function($) {
    $('.wrapper .page-perspective').removeAttr('style');
    $('.views-row').hide();
    $('.Whitepapers').slice(0,4).parent().parent().show();
    perspective_type();
  });

})(jQuery)

.views-row{
height:50px;
border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page_perspectives">
  <div class="view view-page-perspectives view-id-page_perspectives">
    <div class="perspective-list">
      <ul class="nav nav-justified">
        <li class="">
          <a class="Blogs" href="Blogs">Blogs</a>
        </li>
        <li>
          <a class="Case_Studies" href="Case_Studies">Case Studies</a>
        </li>
        <li class="active">
          <a class="Whitepapers" href="Whitepapers">Whitepapers</a>
        </li>
      </ul>
    </div>
    <div class="view-content">
      <div class="views-row views-row-1 views-row-odd views-row-first">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: none;">
            Whitepaper 1
          </div>
        </div>
      </div>
      <div class="views-row views-row-2 views-row-even">
        <div class="wrapper">
          <div class="page-perspective row Blogs" style="display: none;">
            Blogs 1
          </div>
        </div>
      </div>
      <div class="views-row views-row-3 views-row-odd">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: none;">
            Whitepaper 2
          </div>
        </div>
      </div>
      <div class="views-row views-row-4 views-row-even">
        <div class="wrapper">
          <div class="page-perspective row Case_Studies" style="display: none;">
            Case study 1
          </div>
        </div>
      </div>
      <div class="views-row views-row-5 views-row-odd">
        <div class="wrapper">
          <div class="page-perspective row Blogs" style="display: none;">
            Blogs 2
          </div>
        </div>
      </div>
      <div class="views-row views-row-6 views-row-even">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: none;">
            Whitepaper 3
          </div>
        </div>
      </div>
      <div class="views-row views-row-7 views-row-odd views-row-last">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: none;">
            Whitepaper 4
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​

是小提琴版本。