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

基本上，我有这个类别菜单，当点击加减按钮时，它会展开和关闭。当点击父类别和子类别时，它也会这样做。如果单击子类别，则它会将您带到一个页面

我想要的是 仅当单击加减按钮时，菜单才会展开。 如果您单击父类别或子类别，它将带您进入一个页面并保持打开状态。加载时应如下所示。仅在顶级打开时显示打开的子类别。子类别仅在单击时打开

当父类别打开或单击时，我希望只打开子类别。因此，如果您要加载菜单，它将如下所示

顶级

-子类别

-子类别

-子类别

顶级

-子类别

-子类别

-子类别

任何帮助都将不胜感激

签出我的密码笔

html

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标记的子标记，所以必须为slideToggle（）添加另一个级别的parent（）

然后像平常一样添加标签链接，现在它是：

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

*{
保证金：0；
填充：0；
边界：无；
}
图{显示：块}
a、 b、正文、div、图、html、li、span、ul{
背景：透明；
边界：0无；
字体大小：继承；
保证金：0；
填充：0；
边界：0；
大纲：0；
垂直对齐：顶部；
}
a{
文字装饰：无；
大纲：无！重要；
}
b{
字体大小：粗体！重要；
}
保险商实验室{
列表样式：无；
}
html，正文{
身高：100%；
}
/* -----------------------------------
2.基本类和元素
------------------------------------- */
身体{
字体：300 14px/21px“机器人”，“无衬线”；
颜色：#696e6e；
背景:#232830；
字母间距：0.1px；
溢出x：隐藏；
-webkit背面可见性：隐藏；
背景附件：固定；
}
丁屋大厦{
显示：块；
}
.f_尺寸_大{
字号：1.15em；
}
r_角{
-webkit边界半径：4px；
-moz边界半径：4px；
边界半径：4px；
}
.亲戚{
位置：相对位置；
}
.包装纸{
溢出：隐藏；
}
.m_底部_30{
边缘底部：30px；
}
对{
浮动：对；
}
：：选择{
背景：#e74c3c；
颜色：#fff；
}
：-moz选择{
背景：#e74c3c；
颜色：#fff；
}
：-o-选择{
背景：#e74c3c；
颜色：#fff；
}
：-ms选择{
背景：#e74c3c；
颜色：#fff；
}
：-webkit输入占位符{
颜色：#696e6e；
}
：-moz占位符{
颜色：#696e6e；
不透明度：1；
}
：-ms输入占位符{
颜色：#696e6e；
}
：-webkit滚动条{
宽度：10px；
背景#323a45；
}
：-webkit滚动条拇指{
-webkit边界半径：4px；
边界半径：4px；
}
/* -----------------------------------
3.配色方案
------------------------------------- */
a、 a[class*=“color”]：非（.color\u light）：悬停.scheme\u color{
颜色：#e74c3c；
}
：-webkit滚动条拇指{
背景：#e74c3c；
}
/* -----------------------------------
4.印刷术
------------------------------------- */
a{
-webkit过渡：颜色。4s轻松，背景色。4s轻松；
-moz过渡：颜色。4s轻松，背景色。4s轻松；
-o型过渡：颜色。4s轻松，背景色。4s轻松；
过渡：颜色。4s轻松，背景色。4s轻松；
}
a:悬停，。颜色为深色{
颜色：#292f38；
}
.bg\u灯光\u颜色\u 1{
背景#ecf0f1；
}
/* -----------------------------------
10列表和导航
------------------------------------- */
.categories\u list.active>a>span:after{
不透明度：1；
}
.categories\u list.active>a>span:before..categories\u list a>span:after{
不透明度：0；
}
.categories\u list>li:最后一个孩子>a{
边界：无；
}
.类别(表){
利润上限：-7px；
}
.类别清单a{
填充：7px25px7px0；
边框底部：1px实心#ecf0f1；
单词break：打破一切；
}
.categories\u list>li:最后一个孩子>a{
垫底：0px；
}
.类别列表ul>li>a{
左侧填充：20px；
}
.类别列表ul ul>li>a{
左侧填充：40px；
}
.categories\u列表a>span{
显示：块；
宽度：23px；
高度：23px；
线高：23px；
位置：绝对位置；
右：0；
最高：50%；
最高保证金：-11.5px；
}
.categories\u list a>span:before..categories\u list a>span:after{
内容：“；
宽度：9px；
高度：9px；
背景：url（“http://velikorodnov.com/html/flatastic/classic/images/plusminus.png）无重复；
位置：绝对位置；
显示：块；
最高：50%；
左：50%；
保证金：-5px0-4px；
-webkit转换：不透明度。4s轻松；
-moz过渡：不透明度。4s缓解；
-o型过渡：不透明度。4s缓解；
过渡：不透明；
}
.categories\u list a>span:之后{
高度：1px；
宽度：8px；
背景位置：0-9px；
保证金：-1px0-4px；
}
@仅媒体屏幕和（-webkit最小设备像素比：0）{
.categories_list a>span:之前，
.categories\u list a>span:之后{
左边距：-5px；
}
}
/****禁用同位素CSS3跃迁****/
.widget_内容{
填充：23px 20px 25px；
背景：#fff；
}
/* -----------------------------------
18响应性变化
------------------------------------- */
@仅介质屏幕和（最大宽度：992px）{
.widget_内容{
左侧填充：19px；
右侧填充：19px；
}
}
@仅介质屏幕和（最大宽度：768px）{
/*表格改变*/
}
/* -----------------------------------
19视网膜就绪
------------------------------------- */
@仅媒体屏幕和（-webkit最小设备像素比：1.5），
仅屏幕和屏幕（最小分辨率：144 dpi）{
.categories\u list a>span:before..categories\u list a>span:after{
背景图像：url（“http://velikorodnov.com/html/flatastic/classic/images/plusminus@2x.png”）；
背景尺寸：9px 10px；
}
}

类别




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 href="#"></a>

<a href="/contact"></a>