个人中心
gpt4 book ai didi

javascript - 当单击父级时，如何在 jQuery Accordion 菜单中同时打开父级的子级和子级？

转载 作者：行者123 更新时间：2023-11-28 07:03:18 27 4
gpt4 key购买 nike

我正在使用这个 jQuery 插件来实现多级 Accordion 菜单: http://codepen.io/anon/pen/BNqvvB

我有一些编程知识，但对 jQuery 很陌生，不太了解。我想要完成的是，当单击父

时，子

和子

部分滑动打开。原始代码仅在单击

父级时打开

子级，而不是子级

。

如果菜单用于在较低的子级别显示多个选项(例如插件 HTML 显示新闻报道的标题)，那么这是有意义的，但就我而言，我使用菜单在较低的子级别显示单个报道家长级别及其 flavor 文本和 child 级别的段落。这意味着让用户单击 flavor 文本来查看段落文本是没有意义的。

既然如此，一旦有人单击

中的故事标题，我希望

中的 flavor 文本和

中的故事段落在该单击时同时显示。

我怎样才能做到这一点？

jQuery

var headers = ["H1","H2","H3","H4","H5","H6"];

$(".accordion").click(function(e) {
  var target = e.target,
      name = target.nodeName.toUpperCase();

  if($.inArray(name,headers) > -1) {
    var subItem = $(target).next();

    //slideUp all elements (except target) at current depth or greater
    var depth = $(subItem).parents().length;
    var allAtDepth = $(".accordion p, .accordion div").filter(function() {
      if($(this).parents().length >= depth && this !== subItem.get(0)) {
        return true; 
      }
    });
    $(allAtDepth).slideUp("fast");

    //slideToggle target content and adjust bottom border if necessary
    subItem.slideToggle("fast",function() {
        $(".accordion :visible:last").css("border-radius","0 0 10px 10px");
    });
    $(target).css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"});
  }
});

HTML

<link href='http://fonts.googleapis.com/css?family=News+Cycle:400,700' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<aside class="accordion">

            <h1>News</h1> 
            <div class="opened-for-codepen">
                <h2>News Item #1</h2> 
                <div class="opened-for-codepen">
                    <h3>News Item #1a</h3> 
                    <div>
                        <h4>News Subitem 1</h4> 
    <!--WOULD BECOME "Story 1 passage text"-->
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>

<link href='http://fonts.googleapis.com/css?family=News+Cycle:400,700' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<aside class="accordion">
<!--EXAMPLE OF HOW I WANT TO USE MENU ITEMS/HEADERS--->
    <h1>News</h1><!--WOULD BECOME "Act 1"-->
    <div class="opened-for-codepen">
        <h2>News Item #1</h2><!--WOULD BECOME "Story Arc 1"-->
        <div class="opened-for-codepen">
            <!--CLICKING <H3> WOULD OPEN <H4> AND <P>-->
            <h3>News Item #1a</h3><!--WOULD BECOME "Story 1 by Author 1"-->
            <div>
                <!--WOULD OPEN WHEN <H3> IS CLICKED-->
                <h4>News Subitem 1</h4><!--WOULD BECOME "Story 1 flavor text"-->            
                <!--WOULD ALSO OPEN WHEN <H3> IS CLICKED-->
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <h3>News Item #1b</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

            <h3>News Item #1c</h3>
            <div class="opened-for-codepen">
                <h4>News Subitem 1</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h4>News Subitem 2</h4>
                <p class="opened-for-codepen">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>

        <h2>News Item #2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <h2>News Item #3</h2>
        <div>
            <h3>News Item #3a</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

            <h3>News Item #3b</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>

    <h1>Updates</h1>
    <div>
        <h2>Update #1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <h2>Update #2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <h2>Update #3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <h2>Update #4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <h1>Miscellaneous</h1>
    <div>
        <h2>Misc. #1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <h2>Misc. #2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <h2>Misc. #3</h2>
        <div>
            <h3>Misc. Item #1a</h3>
            <div>
                <h4>Misc. Subitem 1</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h4>Misc. Subitem 2</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h4>Misc. Subitem 3</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <h3>Misc. Item #2a</h3>
            <div>
                <h4>Misc. Subitem 1</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h4>Misc. Subitem 2</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>
    </div>
</aside>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

                    <h3>News Item #1b</h3>
                    <div>
                        <h4>News Subitem 1</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                        <h4>News Subitem 2</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>

                    <h3>News Item #1c</h3>
                    <div class="opened-for-codepen">
                        <h4>News Subitem 1</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                        <h4>News Subitem 2</h4>
                        <p class="opened-for-codepen">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>

                <h2>News Item #2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h2>News Item #3</h2>
                <div>
                    <h3>News Item #3a</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                    <h3>News Item #3b</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>

            <h1>Updates</h1>
            <div>
                <h2>Update #1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h2>Update #2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h2>Update #3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h2>Update #4</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <h1>Miscellaneous</h1>
            <div>
                <h2>Misc. #1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h2>Misc. #2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h2>Misc. #3</h2>
                <div>
                    <h3>Misc. Item #1a</h3>
                    <div>
                        <h4>Misc. Subitem 1</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                        <h4>Misc. Subitem 2</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                        <h4>Misc. Subitem 3</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                    <h3>Misc. Item #2a</h3>
                    <div>
                        <h4>Misc. Subitem 1</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                        <h4>Misc. Subitem 2</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
            </div>
        </aside>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

CSS

* {
  margin: 0; padding: 0;
}
body {
  font-size: 100%;
}
.accordion {
  width: 380px;
  margin: 20px auto;
}
.accordion h1, h2, h3, h4 {
  cursor: pointer;
}
.accordion h2, h3, h4 {
  font-family: "News Cycle";
}
.accordion h1 {
  padding: 15px 20px;
  background-color: #333;
  font-family: Lobster;
  font-size: 1.5rem;
  font-weight: normal;
  color: #1abc9c;
}
.accordion h1:hover {
  color: #4afcdc;
}
.accordion h1:first-child {
  border-radius: 10px 10px 0 0;
}
.accordion h1:last-of-type {
  border-radius: 0 0 10px 10px;
}
.accordion h1:not(:last-of-type) {
  border-bottom: 1px dotted #1abc9c;
}
.accordion div, .accordion p {
  display: none;
}
.accordion h2 {
  padding: 5px 25px;
  background-color: #1abc9c;
  font-size: 1.1rem;
  color: #333;
}
.accordion h2:hover {
  background-color: #09ab8b;
}
.accordion h3 {
  padding: 5px 30px;
  background-color: #b94152;
  font-size: .9rem;
  color: #ddd; 
}
.accordion h3:hover {
  background-color: #a93142;
}
.accordion h4 {
  padding: 5px 35px;
  background-color: #ffc25a;
  font-size: .9rem;
  color: #af720a; 
}
.accordion h4:hover {
  background-color: #e0b040;
}
.accordion p {
  padding: 15px 35px;
  background-color: #ddd;
  font-family: "Georgia";
  font-size: .8rem;
  color: #333;
  line-height: 1.3rem;
}
.accordion .opened-for-codepen {
  display: block;
}

最佳答案

我添加了这个:

$('h3').click(function(){
  $(this).next('div').find('p').show();
});

并将其注释掉:

$(allAtDepth).slideUp("fast");

Here is the full code on CodePen

似乎对我有用:)

关于javascript - 当单击父级时，如何在 jQuery Accordion 菜单中同时打开父级的子级和子级？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31907928/

27 4 0
文章推荐： ios - Parse 中的查询指针 (ios)
文章推荐： javascript - 如何使用 javascript print 删除页面标题、url、日期时间和页码
文章推荐： javascript - React 颜色动画同步
文章推荐： ios - 如何在 Swift 中导入 FBSession.h
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com