[英]accordion menu expand and close on button click
基本上,我有这个类别菜单,当单击加减按钮时会展开和关闭,在单击父类别和子类别时也是如此。 如果单击子子类别,则会带您进入页面。
我要的是菜单仅在单击加减按钮时才会展开。 如果单击“父类别”或“子类别”,它将带您进入页面并保持打开状态。 加载后应如下图所示。 仅在打开“顶层”时显示打开的子类别。 子子类别仅在单击时打开。
当父类别打开或单击时,我只想打开子类别。 因此,如果要加载菜单,它将看起来像
顶层
-子类别
-子类别
-子类别
顶层
-子类别
-子类别
-子类别
任何帮助表示赞赏
签出我的codepen https://codepen.io/mdaniel559/pen/QMvWwW
html
<div class="sidebar nobottommargin">
<!--Categories-->
<div class="menu-header">Categories</div>
<figure class="widget shadowonly r_corners wrapper m_bottom_30">
<div class="widget_content">
<!--Categories list-->
<ul class="categories_list">
<li class="active">
<a href="http://#" class="f_size_large scheme_color d_block relative">
<b>Top Level Category</b>
<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<!--second level-->
<ul>
<li class="active">
<a href="#" class="d_block f_size_large color_dark relative">
Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<!--third level-->
<ul>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
</ul>
</li>
<li>
<a href="#" class="d_block f_size_large color_dark relative">
Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<!--third level-->
<ul>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
</ul>
</li>
<li>
<a href="#" class="d_block f_size_large color_dark relative">
Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<!--third level-->
<ul>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</figure>
</div>
的CSS
*{
margin:0;
padding:0;
border:none;
}
figure{display:block}
a, b, body, div, figure, html, li, span, ul{
background: transparent;
border: 0 none;
font-weight: inherit;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
}
a{
text-decoration:none;
outline: none !important;
}
b{
font-weight:bold !important;
}
ul{
list-style: none;
}
html,body{
height:100%;
}
/* -----------------------------------
2. Basic classes and elements
------------------------------------- */
body{
font:300 14px/21px 'Roboto', 'sans-serif';
color:#696e6e;
background:#232830;
letter-spacing: 0.1px;
overflow-x: hidden;
-webkit-backface-visibility:hidden;
background-attachment:fixed;
}
.d_block{
display:block;
}
.f_size_large{
font-size:1.15em;
}
.r_corners{
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.relative{
position:relative;
}
.wrapper{
overflow: hidden;
}
.m_bottom_30{
margin-bottom:30px;
}
.f_right{
float:right;
}
::selection{
background: #e74c3c;
color:#fff;
}
::-moz-selection{
background: #e74c3c;
color:#fff;
}
::-o-selection {
background: #e74c3c;
color:#fff;
}
::-ms-selection {
background: #e74c3c;
color:#fff;
}
::-webkit-input-placeholder{
color:#696e6e;
}
::-moz-placeholder{
color:#696e6e;
opacity:1;
}
:-ms-input-placeholder {
color:#696e6e;
}
::-webkit-scrollbar{
width:10px;
background:#323a45;
}
::-webkit-scrollbar-thumb{
-webkit-border-radius:4px;
border-radius:4px;
}
/* -----------------------------------
3. Color Scheme
------------------------------------- */
a,a[class*="color"]:not(.color_light):hover,.scheme_color{
color:#e74c3c;
}
::-webkit-scrollbar-thumb{
background:#e74c3c;
}
/* -----------------------------------
4. Typography
------------------------------------- */
a{
-webkit-transition: color .4s ease, background-color .4s ease;
-moz-transition: color .4s ease, background-color .4s ease;
-o-transition: color .4s ease, background-color .4s ease;
transition: color .4s ease, background-color .4s ease;
}
a:hover,.color_dark{
color:#292f38;
}
.bg_light_color_1{
background:#ecf0f1;
}
/* -----------------------------------
10. Lists and navigations
------------------------------------- */
.categories_list .active > a > span:after{
opacity:1;
}
.categories_list .active > a > span:before,.categories_list a > span:after{
opacity:0;
}
.categories_list > li:last-child > a{
border:none;
}
.categories_list{
margin-top:-7px;
}
.categories_list a{
padding:7px 25px 7px 0;
border-bottom:1px solid #ecf0f1;
word-break:break-all;
}
.categories_list > li:last-child > a{
padding-bottom:0px;
}
.categories_list ul > li > a{
padding-left:20px;
}
.categories_list ul ul > li > a{
padding-left:40px;
}
.categories_list a > span{
display:block;
width:23px;
height:23px;
line-height: 23px;
position:absolute;
right:0;
top:50%;
margin-top:-11.5px;
}
.categories_list a > span:before,.categories_list a > span:after{
content:"";
width:9px;
height:9px;
background:url("../images/plusminus.png") no-repeat;
position: absolute;
display:block;
top:50%;
left:50%;
margin:-5px 0 0 -4px;
-webkit-transition:opacity .4s ease;
-moz-transition:opacity .4s ease;
-o-transition:opacity .4s ease;
transition:opacity .4s ease;
}
.categories_list a > span:after{
height:1px;
width:8px;
background-position: 0 -9px;
margin:-1px 0 0 -4px;
}
@media only screen and (-webkit-min-device-pixel-ratio:0){
.categories_list a > span:before,
.categories_list a > span:after{
margin-left:-5px;
}
}
/**** disabling Isotope CSS3 transitions ****/
.widget_content{
padding:23px 20px 25px;
background: #fff;
}
/* -----------------------------------
18. Responsive changes
------------------------------------- */
@media only screen and (max-width: 992px){
.widget_content{
padding-left:19px;
padding-right:19px;
}
}
@media only screen and (max-width:768px){
/* tables change*/
}
/* -----------------------------------
19. Retina ready
------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144 dpi){
.categories_list a > span:before,.categories_list a > span:after{
background-image:url("../images/plusminus@2x.png");
background-size:9px 10px;
}
}
jQuery的
jQuery('button[type="reset"]:not(#styleswitcher button[type="reset"])').on('click',function(){
color.eq(0).addClass('active').parent().siblings().children('button').removeClass('active');
slider.slider( "option", "values", [ 0, 237 ] );
});
jQuery('.categories_list').on('click','a',function(e){
if(jQuery(this).parent().children('ul').length){
jQuery(this).parent().toggleClass('active').end().next().slideToggle();
e.preventDefault();
}
});
jQuery('.categories_list > li > a').on('click',function(e){
if(jQuery(this).parent().children('ul').length){
jQuery(this).toggleClass('scheme_color').toggleClass('color_dark');
e.preventDefault();
}
});
好的,所以,如果我理解正确,则只想在单击+按钮时扩展滑块。
这是我所做的,而不是单击a标记,而是单击a标记内的span标记,该标记是加号,现在因为span是a标记的子代,则必须添加另一个级别的parent()对于slideToggle()。
然后只需像往常一样向标签添加链接,现在它是:
<a href="#"></a>
您应该将其更改为:
<a href="/contact"></a>
jQuery('.categories_list').on('click','span',function(e){ if(jQuery(this).parent().parent().children('ul').length){ jQuery(this).parent().parent().toggleClass('active').end().next().slideToggle(); e.preventDefault(); } });
*{ margin:0; padding:0; border:none; } figure{display:block} a, b, body, div, figure, html, li, span, ul{ background: transparent; border: 0 none; font-weight: inherit; margin: 0; padding: 0; border: 0; outline: 0; vertical-align: top; } a{ text-decoration:none; outline: none !important; } b{ font-weight:bold !important; } ul{ list-style: none; } html,body{ height:100%; } /* ----------------------------------- 2. Basic classes and elements ------------------------------------- */ body{ font:300 14px/21px 'Roboto', 'sans-serif'; color:#696e6e; background:#232830; letter-spacing: 0.1px; overflow-x: hidden; -webkit-backface-visibility:hidden; background-attachment:fixed; } .d_block{ display:block; } .f_size_large{ font-size:1.15em; } .r_corners{ -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .relative{ position:relative; } .wrapper{ overflow: hidden; } .m_bottom_30{ margin-bottom:30px; } .f_right{ float:right; } ::selection{ background: #e74c3c; color:#fff; } ::-moz-selection{ background: #e74c3c; color:#fff; } ::-o-selection { background: #e74c3c; color:#fff; } ::-ms-selection { background: #e74c3c; color:#fff; } ::-webkit-input-placeholder{ color:#696e6e; } ::-moz-placeholder{ color:#696e6e; opacity:1; } :-ms-input-placeholder { color:#696e6e; } ::-webkit-scrollbar{ width:10px; background:#323a45; } ::-webkit-scrollbar-thumb{ -webkit-border-radius:4px; border-radius:4px; } /* ----------------------------------- 3. Color Scheme ------------------------------------- */ a,a[class*="color"]:not(.color_light):hover,.scheme_color{ color:#e74c3c; } ::-webkit-scrollbar-thumb{ background:#e74c3c; } /* ----------------------------------- 4. Typography ------------------------------------- */ a{ -webkit-transition: color .4s ease, background-color .4s ease; -moz-transition: color .4s ease, background-color .4s ease; -o-transition: color .4s ease, background-color .4s ease; transition: color .4s ease, background-color .4s ease; } a:hover,.color_dark{ color:#292f38; } .bg_light_color_1{ background:#ecf0f1; } /* ----------------------------------- 10. Lists and navigations ------------------------------------- */ .categories_list .active > a > span:after{ opacity:1; } .categories_list .active > a > span:before,.categories_list a > span:after{ opacity:0; } .categories_list > li:last-child > a{ border:none; } .categories_list{ margin-top:-7px; } .categories_list a{ padding:7px 25px 7px 0; border-bottom:1px solid #ecf0f1; word-break:break-all; } .categories_list > li:last-child > a{ padding-bottom:0px; } .categories_list ul > li > a{ padding-left:20px; } .categories_list ul ul > li > a{ padding-left:40px; } .categories_list a > span{ display:block; width:23px; height:23px; line-height: 23px; position:absolute; right:0; top:50%; margin-top:-11.5px; } .categories_list a > span:before,.categories_list a > span:after{ content:""; width:9px; height:9px; background:url("http://velikorodnov.com/html/flatastic/classic/images/plusminus.png") no-repeat; position: absolute; display:block; top:50%; left:50%; margin:-5px 0 0 -4px; -webkit-transition:opacity .4s ease; -moz-transition:opacity .4s ease; -o-transition:opacity .4s ease; transition:opacity .4s ease; } .categories_list a > span:after{ height:1px; width:8px; background-position: 0 -9px; margin:-1px 0 0 -4px; } @media only screen and (-webkit-min-device-pixel-ratio:0){ .categories_list a > span:before, .categories_list a > span:after{ margin-left:-5px; } } /**** disabling Isotope CSS3 transitions ****/ .widget_content{ padding:23px 20px 25px; background: #fff; } /* ----------------------------------- 18. Responsive changes ------------------------------------- */ @media only screen and (max-width: 992px){ .widget_content{ padding-left:19px; padding-right:19px; } } @media only screen and (max-width:768px){ /* tables change*/ } /* ----------------------------------- 19. Retina ready ------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144 dpi){ .categories_list a > span:before,.categories_list a > span:after{ background-image:url("http://velikorodnov.com/html/flatastic/classic/images/plusminus@2x.png"); background-size:9px 10px; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sidebar nobottommargin"> <!--Categories--> <div class="menu-header">Categories</div> <figure class="widget shadowonly r_corners wrapper m_bottom_30"> <div class="widget_content"> <!--Categories list--> <ul class="categories_list"> <li class="active"> <a href="#" class="f_size_large scheme_color d_block relative"> <b>Top Level Category</b> <span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--second level--> <ul> <li class="active"> <a href="#" class="d_block f_size_large color_dark relative"> Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--third level--> <ul> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> </ul> </li> <li> <a href="#" class="d_block f_size_large color_dark relative"> Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--third level--> <ul> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> </ul> </li> <li> <a href="#" class="d_block f_size_large color_dark relative"> Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--third level--> <ul> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> </ul> </li> </ul> </li> </ul> </div> </figure> </div>
更新,仅显示第一级和第二级,将style =“ display:none”设置为第三级列表,并将类设置为仅在第一级li上处于活动状态
jQuery('.categories_list').on('click','span',function(e){ if(jQuery(this).parent().parent().children('ul').length){ jQuery(this).parent().parent().toggleClass('active').end().next().slideToggle(); e.preventDefault(); } });
*{ margin:0; padding:0; border:none; } figure{display:block} a, b, body, div, figure, html, li, span, ul{ background: transparent; border: 0 none; font-weight: inherit; margin: 0; padding: 0; border: 0; outline: 0; vertical-align: top; } a{ text-decoration:none; outline: none !important; } b{ font-weight:bold !important; } ul{ list-style: none; } html,body{ height:100%; } /* ----------------------------------- 2. Basic classes and elements ------------------------------------- */ body{ font:300 14px/21px 'Roboto', 'sans-serif'; color:#696e6e; background:#232830; letter-spacing: 0.1px; overflow-x: hidden; -webkit-backface-visibility:hidden; background-attachment:fixed; } .d_block{ display:block; } .f_size_large{ font-size:1.15em; } .r_corners{ -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .relative{ position:relative; } .wrapper{ overflow: hidden; } .m_bottom_30{ margin-bottom:30px; } .f_right{ float:right; } ::selection{ background: #e74c3c; color:#fff; } ::-moz-selection{ background: #e74c3c; color:#fff; } ::-o-selection { background: #e74c3c; color:#fff; } ::-ms-selection { background: #e74c3c; color:#fff; } ::-webkit-input-placeholder{ color:#696e6e; } ::-moz-placeholder{ color:#696e6e; opacity:1; } :-ms-input-placeholder { color:#696e6e; } ::-webkit-scrollbar{ width:10px; background:#323a45; } ::-webkit-scrollbar-thumb{ -webkit-border-radius:4px; border-radius:4px; } /* ----------------------------------- 3. Color Scheme ------------------------------------- */ a,a[class*="color"]:not(.color_light):hover,.scheme_color{ color:#e74c3c; } ::-webkit-scrollbar-thumb{ background:#e74c3c; } /* ----------------------------------- 4. Typography ------------------------------------- */ a{ -webkit-transition: color .4s ease, background-color .4s ease; -moz-transition: color .4s ease, background-color .4s ease; -o-transition: color .4s ease, background-color .4s ease; transition: color .4s ease, background-color .4s ease; } a:hover,.color_dark{ color:#292f38; } .bg_light_color_1{ background:#ecf0f1; } /* ----------------------------------- 10. Lists and navigations ------------------------------------- */ .categories_list .active > a > span:after{ opacity:1; } .categories_list .active > a > span:before,.categories_list a > span:after{ opacity:0; } .categories_list > li:last-child > a{ border:none; } .categories_list{ margin-top:-7px; } .categories_list a{ padding:7px 25px 7px 0; border-bottom:1px solid #ecf0f1; word-break:break-all; } .categories_list > li:last-child > a{ padding-bottom:0px; } .categories_list ul > li > a{ padding-left:20px; } .categories_list ul ul > li > a{ padding-left:40px; } .categories_list a > span{ display:block; width:23px; height:23px; line-height: 23px; position:absolute; right:0; top:50%; margin-top:-11.5px; } .categories_list a > span:before,.categories_list a > span:after{ content:""; width:9px; height:9px; background:url("http://velikorodnov.com/html/flatastic/classic/images/plusminus.png") no-repeat; position: absolute; display:block; top:50%; left:50%; margin:-5px 0 0 -4px; -webkit-transition:opacity .4s ease; -moz-transition:opacity .4s ease; -o-transition:opacity .4s ease; transition:opacity .4s ease; } .categories_list a > span:after{ height:1px; width:8px; background-position: 0 -9px; margin:-1px 0 0 -4px; } @media only screen and (-webkit-min-device-pixel-ratio:0){ .categories_list a > span:before, .categories_list a > span:after{ margin-left:-5px; } } /**** disabling Isotope CSS3 transitions ****/ .widget_content{ padding:23px 20px 25px; background: #fff; } /* ----------------------------------- 18. Responsive changes ------------------------------------- */ @media only screen and (max-width: 992px){ .widget_content{ padding-left:19px; padding-right:19px; } } @media only screen and (max-width:768px){ /* tables change*/ } /* ----------------------------------- 19. Retina ready ------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144 dpi){ .categories_list a > span:before,.categories_list a > span:after{ background-image:url("http://velikorodnov.com/html/flatastic/classic/images/plusminus@2x.png"); background-size:9px 10px; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sidebar nobottommargin"> <!--Categories--> <div class="menu-header">Categories</div> <figure class="widget shadowonly r_corners wrapper m_bottom_30"> <div class="widget_content"> <!--Categories list--> <ul class="categories_list"> <li class="active"> <!-- class active --> <a href="#" class="f_size_large scheme_color d_block relative"> <b>Top Level Category</b> <span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--second level--> <ul> <li> <a href="#" class="d_block f_size_large color_dark relative"> Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--third level--> <ul style="display:none;"> <!-- display none --> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> </ul> </li> <li> <a href="#" class="d_block f_size_large color_dark relative"> Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--third level--> <ul style="display:none;"> <!-- display none --> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> </ul> </li> <li> <a href="#" class="d_block f_size_large color_dark relative"> Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--third level--> <ul style="display:none;"> <!-- display none --> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> </ul> </li> </ul> </li> </ul> </div> </figure> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.