在点击事件中隐藏父div [英] hide the parent div on click event

查看：86
本文介绍了在点击事件中隐藏父div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

 （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）。 ATT r（'href'）; $（'。wrapper> ：not（。'+ href +'）'）。hide（）; $（'。wrapper>。'+ href +''）.slice（0,3）.show（）; $（本）.parent（）addClass（激活）。 }）; $（。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 =博客href =博客>博客< / a> < /锂> <李> < a class =Case_Studieshref =Case_Studies>案例研究< / a> < /锂> < li class =active> < a class =Whitepapershref =Whitepapers>白皮书< / a> < /锂> < / 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 Whitepapersstyle =display：none;>白皮书1< / div> < / DIV> < / DIV> < div class =views-row views-row-2 views-row-even> < div class =wrapper> < div class =page-perspective row Blogsstyle =display：none;>博客1< / div> < / DIV> < / DIV> < div class =views-row views-row-3 views-row-odd> < div class =wrapper> < div class =page-perspective row Whitepapersstyle =display：none;>白皮书2< / div> < / DIV> < / DIV> < div class =views-row views-row-4 views-row-even> < div class =wrapper> < div class =page-perspective row Case_Studiesstyle =display：none;>案例研究1< / div> < / DIV> < / DIV> < div class =views-row views-row-5 views-row-odd> < div class =wrapper> < div class =page-perspective row Blogsstyle =display：none;>博客2< / div> < / DIV> < / DIV> < div class =views-row views-row-6 views-row-even> < div class =wrapper> < div class =page-perspective row Whitepapersstyle =display：none;>白皮书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 Whitepapersstyle =display：none;>白皮书4< / div> < / DIV> < / DIV> < / DIV> < / div>< / div>

解决方案

正如你所提到的，所有代码都是动态发布的，并且你对 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 （ '有效'）; //$('.wrapper .page-perspective'）。slice（0,3）.show（）; / *不确定这一行正在做什么。不需要这个。* / var href = $（this）.attr（'href'）; $（'。wrapper>：not（。'+ href +'）'）。parent（）。parent（）。hide（）; $（'。wrapper>。'+ href +''）.slice（0,3）.parent（）。parent（）。show（）; $（本）.parent（）addClass（激活）。 }）; $（。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（）; $（'。 （））.parent（）。parent（）。show（）; perspective_type（）;}）;}）（jQuery）

< pre class =snippet-code-css lang-css prettyprint-override> .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 =博客href =博客>博客< / a> < /锂> <李> < a class =Case_Studieshref =Case_Studies>案例研究< / a> < /锂> < li class =active> < a class =Whitepapershref =Whitepapers>白皮书< / a> < /锂> < / 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 Whitepapersstyle =display：none;>白皮书1< / div> < / DIV> < / DIV> < div class =views-row views-row-2 views-row-even> < div class =wrapper> < div class =page-perspective row Blogsstyle =display：none;>博客1< / div> < / DIV> < / DIV> < div class =views-row views-row-3 views-row-odd> < div class =wrapper> < div class =page-perspective row Whitepapersstyle =display：none;>白皮书2< / div> < / DIV> < / DIV> < div class =views-row views-row-4 views-row-even> < div class =wrapper> < div class =page-perspective row Case_Studiesstyle =display：none;>案例研究1< / div> < / DIV> < / DIV> < div class =views-row views-row-5 views-row-odd> < div class =wrapper> < div class =page-perspective row Blogsstyle =display：none;>博客2< / div> < / DIV> < / DIV> < div class =views-row views-row-6 views-row-even> < div class =wrapper> < div class =page-perspective row Whitepapersstyle =display：none;>白皮书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 Whitepapersstyle =display：none;>白皮书4< / div> < / DIV> < / DIV> < / DIV> < / div>< / div>

这里 是小提琴版本。


I have the list perspective-list item Blogs,Case_Studies,Whitepapers with respective class.on click the list item it show the respective element in '.page-perspective' ie.If I click blogs it shows only blogs and hide other.If I click whitepapers it shows only whitepapers and hide others.In whitepapers I have four '.page-perspective'.I'm showing only first three element for whitepaper,blogs and casestudy.

I want to hide '.view-row' but now I'm hiding wrapper section mentioned in code.

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

解决方案

As you mentioned that all codes are coming dynamically and you have some height for the views-row section, so you want to hide views-row section instead of inside element section. For this you have to do the following.

  1. When it is loading remove all the default style attribute for the inner elements.
  2. Now it becomes all the elements is visible, so hide all the views-row element.
  3. As per your requirement, slice the Whitepapers section and find it is respective parent of parent views-row and show it up.
  4. After clicking each link, you have to find the parent of parent and show/hide element.

I have implemented the above steps in the following Snippet.

(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 is the fiddle version.

这篇关于在点击事件中隐藏父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆