堆栈内存溢出
  简体   繁体   English

单击父级时，如何在jQuery手风琴菜单中同时打开父级的子级和子级？

[英]How do I simultaneously open child and sub-child of a parent, in jQuery accordion menu, when parent is clicked?

 原文  2015-08-09 19:13:20  5   1    javascript/ jquery/ html/ css

问题描述

I am using this jQuery plugin for a multilevel accordion menu: http://codepen.io/anon/pen/BNqvvB 我正在将此jQuery插件用于多层手风琴菜单： http : //codepen.io/anon/pen/BNqvvB

I have some programming knowledge but am very new to jQuery and don't know it very well. 我有一些编程知识，但是对jQuery非常陌生，并且不太了解。 What I want to accomplish is for the child <h4> and child <p> sections to slide open, when the parent <h3> is clicked. 我要完成的是单击父<h3>时将子<h4>和子<p>部分滑动打开。 The original code only opens the <h4> child when <h3> parent is clicked and not the sub-child <p>. 原始代码仅在单击<h3>父级时打开<h4>子级，而不打开子子级<p>。

This makes sense if the menu is being used to display multiple options at the lower child level (for instance the plugin HTML displays titles of news stories), but in my case, I am using the menu to display individual stories at the parent level and their flavor text and passage at the child level. 如果菜单用于在较低的子级别上显示多个选项（例如，插件HTML显示新闻报道的标题），那么这是有道理的，但就我而言，我使用菜单在父级别上显示单个故事，他们的味觉文字和儿童层面的段落。 This means making the user click on the flavor text to view the passage text doesn't make sense. 这意味着让用户单击风味文本以查看段落文本是没有意义的。

That being the case, once someone clicks the title of the story placed in <h3>, I want both the flavor text in <h4> and a passage from the story in <p> to display simultaneously on that click. 既然是这样，一旦有人单击放置在<h3>中的故事的标题，我希望<h4>中的风味文本和<p>中故事的段落都在该单击上同时显示。

How can I accomplish this? 我该怎么做？

jQuery 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 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 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;
}

1 个解决方案

解决方案1
 0 已采纳  2015-08-09 20:11:45

I added this: 我添加了这个： 

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

and commented this out: 并注释掉了： 

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

Here is the full code on CodePen 这是CodePen上的完整代码

Seems to work for me :) 似乎为我工作:)

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用javascript或jQuery访问xml中的子元素属性？ - How do I access sub-child attributes in xml using javascript or jQuery? 单击活生子时，如何禁用父级的onclick？ - How do I disable the onclick of parent when live child is clicked? 单击孩子时如何删除父母 - How do I remove a parent when a child is clicked 当单击孩子时，如何使用jQuery将类添加到父元素？ - How do I use jQuery to add a class to a parent element when a child is clicked? 使用jQuery单击父级时，如何使子级元素切换？ - How do I make a child element toggle when the parent is clicked using jQuery? Jquery只针对孩子而不是子孩子 - Target the child only not the sub-child by Jquery 当儿童手风琴边框与父边框重叠时，如何展开父CSS手风琴 - How can I Expand a Parent CSS Accordion, When Child Accordion Border Overlaps Parent Border 父级单击时，JQuery单击子级 - JQuery Click Child when Parent Clicked 单击另一个父级时隐藏父级的子菜单内容 - Hiding the child menu content of the parent when another parent is clicked 使用 jquery 或 javascript 为父子属性创建手风琴式下拉菜单 - Create an accordion dropdown menu for parent & child attributes using jquery or javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM