javascript - Accordion 菜单展开并单击按钮关闭-6ren

javascript - Accordion 菜单展开并单击按钮关闭

转载作者：行者123 更新时间：2023-11-28 04:19:14

基本上，我有一个类别菜单，当单击加减按钮时，它会展开和关闭，当单击父类别和子类别时，它也会执行相同的操作。如果您单击子子类别，则会进入一个页面。

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

我希望在打开或单击父类别时仅打开子类别。所以如果你要加载菜单它看起来像

顶级

-子类别

顶级

-子类别

感谢任何帮助

查看我的代码笔 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();
    }
  });

最佳答案

好吧，如果我理解正确的话，您只想在单击+按钮时展开 slider 。

这就是我所做的，不是单击a标签，而是单击a标签内的span标签(即加号)，现在因为span是a标签的子级，所以您必须添加另一个级别SlideToggle() 的parent()。

然后像平常一样添加到标签的链接，现在是:

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

关于javascript - Accordion 菜单展开并单击按钮关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45580506/

文章推荐： javascript - 单击 anchor 标记后，jQuery 鼠标悬停不起作用

文章推荐： css - Slider Revolution，减少移动设备上的左边距/填充

wpf - 展开/折叠WPF扩展器
如何在代码中展开/折叠WPF扩展器？我需要这样做才能在其中初始化控件。最佳答案使用IsExpanded属性，将其设置为true以使内容可见: myExpander.IsExpanded = tru
powershell - ArrayList 展开
Powershell 展开让我发疯。我有以下代码可以从交换收件人处检索电子邮件地址。我使用 ArrayList 是因为当您希望能够从数组中删除项目时，很多人都建议使用它。 $aliases = Ne
jsf - 展开/折叠数据表中的子表
是否可以展开/折叠数据表中的子表？我的子表包含与其上方行相关的信息，我想显示/隐藏图像的点击。只是想知道我会怎么做？这是我目前使用的:
javascript - 展开/折叠文本区域问题
我正在尝试创建一个可扩展的文本区域，仅当该框为空时，该区域才会折叠回其原始高度。如果它不为空，那么我希望文本区域保持扩展并根据需要增长(即，当用户输入更多文本时增长)。文本区域永远不应该隐藏输入的文本
javascript - 嵌套可排序无法正确折叠/展开
当尝试将 nestedSortable jQuery 插件与其网站上提供的示例一起使用时，该插件无法正常工作。拖放可以工作，但是当我需要折叠/展开时就会出现问题。我使用了另一个问题中建议的解决方案，
javascript - 为什么引导行不折叠/展开？
我有一个显示嵌套数据的表。数据如下所示: Objective 1 Objective 1.1 Objective 1.1.1 Objective 1.2
javascript - 展开/收缩菜单栏
我正在使用 jQuery 从屏幕左侧展开/缩回菜单栏。这是我到目前为止所拥有的: $(document).ready(function(){ $('.menu-button').on("clic
javascript - 按类别向图像添加折叠/展开
如何根据类别向页面上的图像添加隐藏/显示(折叠/展开)功能？我希望具有特定类的图像在加载时折叠，并在 JS 中定义一些任意标记(比方说， Show )，然后在扩展中具有不同的任意标记( Hide )
java - 展开/折叠树后触发事件
我需要在折叠和展开后触发事件调整大小。当我尝试使用 SWT.Collapse 和 SWT.Expand 执行此操作时，树上没有任何更改，因为它在发生之前就已触发。有什么办法吗？最佳答案尝试调用 D
scala - 展开/剥离无形余积对象
我有一个如下所示的域: package object tryme { type ALL = AlarmMessage :+: PassMessage :+: HeyMessage :+: CNil
wpf - 展开/折叠所有扩展器
我有一个扩展器列表，我想用全局切换按钮控制其展开状态(IsExpanded)，该按钮应该在展开/折叠状态之间切换。到目前为止，我得到的解决方案是通过将扩展器的 IsExpanded 状态绑定(bin
python - 展开/折叠后调整小部件的大小
我试图根据 QWidget 是否展开/折叠来自动调整其大小。我尝试了几种发布的方法here和 here . 我没有设法采用这些，以便它按照我想要的方式工作:我希望 QWidget 在展开时调整自身大小
javascript - 展开/折叠对象列表
我正在尝试显示对象模型(机器人)列表，这些模型有一个可以是另一个机器人的字段 Parent。我已经使用 Django 的 MPTT 实现了一个嵌套列表: {% load mptt_tags %}
Javascript - 展开/折叠表格行
鉴于下表/代码，我想添加两项。我不太了解 JavaScript，这段代码是另一个程序员留下的。该代码在所有其他方面都按预期工作。这是两个项目: 表格应该以折叠状态开始。所有节点都应该是崩溃到“祖 p
javascript - 展开/折叠表格行
我想要一张可以展开或折叠的表格。我的要求是当我点击表格行然后隐藏行显示或者当我点击其他表格行然后上一个打开的行隐藏或显示相对隐藏行。我发现一个 jquery jxpand 非常适合我，它显示隐藏的行但
javascript - 展开/折叠将页面带到顶部
如果当您向下滚动页面时元素展开或折叠，页面会突然重置并且焦点会移动到页面顶部。有什么方法可以防止页面移动或使其不那么突然？ $(document).ready(function () {
Android LinearLayout 展开
我正在使用以下代码来扩展特定的线性布局，并且遵循了本教程 http://gmariotti.blogspot.sg/2013/09/expand-and-collapse-animation.html
android - 使可折叠工具栏自动折叠/展开
当垂直偏移超过特定阈值时，如何使android中的可折叠工具栏自动折叠/展开？例如，如果垂直偏移超过 getScrollRange() 的半点，则可折叠工具栏应自动展开，低于该阈值时应折叠。最佳答
CSS - 展开 div
http://t-webdesign.co.uk/new/ 如何在不使用固定高度属性的情况下让灰色 div (#content_right) 扩展到与左侧 div 相同的大小？谢谢最佳答案你可能
javascript - 展开/折叠摘录和内容
设置一个简单的 WordPress 博客，仅包含一个页面，即博客存档。但我遇到了一个问题，我想要切换摘录和内容显示更多/显示更少的功能，以便访问者可以轻松浏览同一页面上的帖子，而无需页面重新加载或被发

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Accordion 菜单展开并单击按钮关闭