基本上我有这个类别菜单，当点击加减号按钮时可以展开和关闭它，当点击父类别和子类别时也会这样做。如果单击子子类别，则会将您带到页面。
我想要的是什么 单击加号减号按钮时，菜单才会展开。 如果您单击父类别或子类别，它将带您到一个页面并保持打开状态。加载时应该如下所示。仅在顶级打开时显示子类别。子子类别仅在单击时打开。
我希望在打开或点击父类别时只打开子类别。因此，如果您要加载菜单，它将看起来像
顶级
- 子类别
- 子类别
- 子类别
顶级
- 子类别
- 子类别
- 子类别
任何帮助表示赞赏
结帐我的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();
}
});
答案 0 :(得分：0)
好的，所以如果我理解正确的话，你只想在点击+按钮时展开滑块。
这是我所做的，而不是单击a标签，单击标签内的span标签，这是加号，现在因为span是a标签的子标记，你必须添加另一个级别slide（）for 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 =＆＃34; display：none＆＃34;到第三级列表并设置仅在第一级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>