手风琴菜单展开并单击按钮关闭

Question

Basically I have this category menu that expands and closes when clicking the plus minus button it also does the same when clicking on parent category and sub category. If you click the sub sub category then it takes you to a page.

What I want is the menu will only expand when clicking the plus minus button. If you click Parent category or sub category it will take you to a page and stay open. Should look like below when loaded. Only showing sub categories open when Top level is open. Sub Sub categories only open when clicked.

Id like to have only sub categories open when a parent category is open or clicked. So if you were to load the menu it would look like

Top Level

-Sub Category

-Sub Category

-Sub category

Top Level

-Sub Category

-Sub Category

-Sub category

any help be appreciated

checkout my 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();
    }
  });

Answer 1

Ok, so if i understand correctly, you only want to expand the slider when click on the + button.

Here is what i did, instead of on click the a tag, on click the span tag inside the a tag which is the plus sign, now because span is a children of the a tag, you have to add another level of parent() for slideToggle().

And then just add links to a tag like you normally would, right now it's:

<a href="#"></a>

You should change it to something like:

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

Update, to only show the first and second level, set style="display:none" to third level list and set class active on first level li only

 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>