在click事件中隐藏父div

问题描述 投票：0回答：1

我有列表透视列表项博客，Case_Studies，白皮书与各自的类。单击列表项，它显示'.page-perspective'中的相应元素ie。如果我点击博客它只显示博客和隐藏其他。如果我点击白皮书它只显示白皮书并隐藏其他人。在白皮书中，我有四个'.page-perspective'。我只显示白皮书，博客和案例研究的前三个元素。

我想隐藏'.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>
jquery html css
1个回答
0
投票

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

  1. 加载时删除内部元素的所有默认样式属性。
  2. 现在它变成所有元素都可见，所以隐藏所有views-row元素。
  3. 根据您的要求，切片Whitepapers部分，发现它是父views-row的相应父级并显示出来。
  4. 单击每个链接后，您必须找到父级和显示/隐藏元素的父级。

我已在以下代码段中实现了上述步骤。

(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>

Here是小提琴版。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.