CSS多级手风琴菜单

Question

我用HTML和CSS编写了一些代码。输出显示在屏幕截图中。 当选择（展开）菜单项时，菜单右侧的颜色部分在选择上述菜单时消失（在鼠标未悬停项目之后）。 即使鼠标没有在菜单上，如何使颜色保持不变？

（请不要建议任何Java Script代码。）

CSS Multi-Level Accordion Menu

＆＃13;

＆＃13;

* {
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 14px;
}

.block {
    float: right;
    max-width: 360px;
    width: 100%;
    height: 100%;
    background-color: white;
    overflow: hidden;
    margin: 0;
}

    .block > div {
        display: block;
        position: relative;
        background-color: #fff;
        color: #767676;
        border-bottom: 1px solid #e5e5e5;
        border-left: 1px solid #e5e5e5;
    }

        .block > div:nth-child(1):before {
            font-family: 'FontAwesome';
            content: "\F0CA";
            font-size: 16px;
            width: 50px;
            font-weight: bold;
            text-align: center;
            position: absolute;
            right: 0;
            top: 0;
            line-height: 50px;
            margin: 0;
            color: #767676;
            border-right: 4px solid #E94B3B;
            background: none; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(to right, rgba(0,0,0,0) 50%, #E94B3B 50%); /* Safari 5.1-6.0 */
            background: -o-linear-gradient(to right, rgba(0,0,0,0) 50%, #E94B3B 50%); /* For Opera 11.6-12.0 */
            background: -moz-linear-gradient(to right, rgba(0,0,0,0) 50%, #E94B3B 50%); /* For Firefox 3.6-15 */
            background: linear-gradient(to right, rgba(0,0,0,0) 50%, #E94B3B 50%); /* Standard syntax */
            background-size: 200% 100%;
            transition: all 0.25s ease-in-out;
        }

        .block > div:nth-child(1):hover:before {
            background-position: 100% 0;
            color: white;
        }

        .block > div:nth-child(2):before {
            font-family: 'FontAwesome';
            content: "\F0F6";
            font-size: 16px;
            width: 50px;
            font-weight: bold;
            text-align: center;
            position: absolute;
            right: 0;
            top: 0;
            line-height: 50px;
            margin: 0;
            color: #767676;
            border-right: 4px solid #ffb61c;
            background: none; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(to right, rgba(0,0,0,0) 50%, #ffb61c 50%); /* Safari 5.1-6.0 */
            background: -o-linear-gradient(to right, rgba(0,0,0,0) 50%, #ffb61c 50%); /* For Opera 11.6-12.0 */
            background: -moz-linear-gradient(to right, rgba(0,0,0,0) 50%, #ffb61c 50%); /* For Firefox 3.6-15 */
            background: linear-gradient(to right, rgba(0,0,0,0) 50%, #ffb61c 50%); /* Standard syntax */
            background-size: 200% 100%;
            transition: all 0.25s ease-in-out;
        }

        .block > div:nth-child(2):hover:before {
            background-position: 100% 0;
            color: white;
        }

        .block > div > input + label {
            cursor: pointer;
            display: block;
            line-height: 50px;
            background-color: white;
            transition: background-color 0.5s;
            color: #767676;
            padding-right: 60px;
            text-align: right;
        }

        .block > div > input ~ div {
            visibility: hidden;
            max-height: 0;
            padding: 0;
            opacity: 0;
            transition: all 0.5s;
        }


        .block > div > input:checked + label {
            background-color: #f3f3f3;
            transition: background-color 0.5s;
            color: black;
        }

        .block > div > input:checked ~ div {
            display: block;
            opacity: 1;
            visibility: visible;
            height: auto;
            max-height: 10000px;
            padding: 0;
            transition: all 0.5s;
        }

    .block a {
        display: block;
        line-height: 50px;
        text-decoration: none;
        color: black;
        border-top: solid 1px #e5e5e5;
        padding-right: 50px;
        text-align: right;
    }

        .block a:hover {
            background: #eeeeee;
        }


@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/FontAwesome.otf') format('opentype');
}

＆＃13;

<div class="block">
        <div>
            <input type="radio" name="item" id="item-one" hidden />
            <label for="item-one">First</label>
            <div>
                <p><a href="#">Menu 1.1</a></p>
                <p><a href="#">Menu 1.2</a></p>
                <p><a href="#">Menu 1.3</a></p>
            </div>
        </div>
        <div>
            <input type="radio" name="item" id="item-two" hidden />
            <label for="item-two">second</label>
            <div>
                <p><a href="#">Menu 2.1</a></p>
                <p><a href="#">Menu 2.2</a></p>
                <p><a href="#">Menu 2.3</a></p>
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以稍微重构一下HTML，这样就可以在输入上使用:checked来实现悬停状态。

首先，将.block>div上的伪元素替换为span之后的label元素。我们需要input之后的东西，所以我们可以用CSS选择它，因为没有CSS父选择器。我们无法在输入中使用伪元素，因此我们只需添加一个范围。

<div class="block">
  <div>
    <input type="checkbox" name="item" id="item-one" hidden />
    <label for="item-one">First</label>
    <span></span>
    <div>
      <p><a href="#">Menu 1.1</a></p>
      <p><a href="#">Menu 1.2</a></p>
      <p><a href="#">Menu 1.3</a></p>
    </div>
  </div>
</div>

请注意，我从伪元素中取出content属性中的小方框符号，然后将其放入span。

之后，只需更改您的选择器即可。所以这......

.block > div:nth-child(1):before { ... }
.block > div:nth-child(1):hover:before { ... }

成为这个...

#item-one + label + span { ... }

.block>div:nth-child(1):hover #item-one + label + span,
#item-one:checked + label + span { ... }

那就是它！

您需要在span上添加一个显式高度，该高度不适用于伪元素，并将跨度设置为display: block。其余款式完全相同。

最后请注意，我已将您的输入从type="radio"更改为type="checkbox"。这样，您可以折叠它们，而不是在您单击它们之后一直强制打开它们。

这是一个片段，其中第一个输入使用新样式，第二个输入与原始样式相同：

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  font-size: 14px;
}
.block {
  float: right;
  max-width: 360px;
  width: 100%;
  height: 100%;
  background-color: white;
  overflow: hidden;
  margin: 0;
}
.block>div {
  display: block;
  position: relative;
  background-color: #fff;
  color: #767676;
  border-bottom: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}
#item-one + label + span {
  display: block;
  font-family: 'FontAwesome';
  content: "\F0CA";
  font-size: 16px;
  width: 50px;
  height: 50px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  margin: 0;
  color: #767676;
  border-right: 4px solid #E94B3B;
  background: none;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #E94B3B 50%);
  /* Safari 5.1-6.0 */
  background: -o-linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #E94B3B 50%);
  /* For Opera 11.6-12.0 */
  background: -moz-linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #E94B3B 50%);
  /* For Firefox 3.6-15 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #E94B3B 50%);
  /* Standard syntax */
  background-size: 200% 100%;
  transition: all 0.25s ease-in-out;
}
.block>div:nth-child(1):hover #item-one + label + span,
#item-one:checked + label + span {
  background-position: 100% 0;
  color: white;
}
.block>div:nth-child(2):before {
  font-family: 'FontAwesome';
  content: "\F0F6";
  font-size: 16px;
  width: 50px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  margin: 0;
  color: #767676;
  border-right: 4px solid #ffb61c;
  background: none;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #ffb61c 50%);
  /* Safari 5.1-6.0 */
  background: -o-linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #ffb61c 50%);
  /* For Opera 11.6-12.0 */
  background: -moz-linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #ffb61c 50%);
  /* For Firefox 3.6-15 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, #ffb61c 50%);
  /* Standard syntax */
  background-size: 200% 100%;
  transition: all 0.25s ease-in-out;
}
.block>div:nth-child(2):hover:before {
  background-position: 100% 0;
  color: white;
}
.block>div>input+label {
  cursor: pointer;
  display: block;
  line-height: 50px;
  background-color: white;
  transition: background-color 0.5s;
  color: #767676;
  padding-right: 60px;
  text-align: right;
}
.block>div>input~div {
  visibility: hidden;
  max-height: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.5s;
}
.block>div>input:checked+label {
  background-color: #f3f3f3;
  transition: background-color 0.5s;
  color: black;
}
.block>div>input:checked~div {
  display: block;
  opacity: 1;
  visibility: visible;
  height: auto;
  max-height: 10000px;
  padding: 0;
  transition: all 0.5s;
}
.block a {
  display: block;
  line-height: 50px;
  text-decoration: none;
  color: black;
  border-top: solid 1px #e5e5e5;
  padding-right: 50px;
  text-align: right;
}
.block a:hover {
  background: #eeeeee;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/FontAwesome.otf') format('opentype');
}

＆＃13;

<div class="block">
  <div>
    <input type="checkbox" name="item" id="item-one" hidden />
    <label for="item-one">First</label>
    <span></span>
    <div>
      <p><a href="#">Menu 1.1</a></p>
      <p><a href="#">Menu 1.2</a></p>
      <p><a href="#">Menu 1.3</a></p>
    </div>
  </div>
  <div>
    <input type="checkbox" name="item" id="item-two" hidden />
    <label for="item-two">second</label>
    <div>
      <p><a href="#">Menu 2.1</a></p>
      <p><a href="#">Menu 2.2</a></p>
      <p><a href="#">Menu 2.3</a></p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

$('.t-blog-list-sidebar').find('li').click(function(e){
	  $('.t-blog-list-sidebar').find('li').removeClass('active');
	  // console.log(this, e);
	  $(this).addClass('active');
	  e.stopPropagation();
	})
	$("li.no-a").click(function(e){
	  $(this).toggleClass('rev');
	    $(this).children("ul").collapse('toggle');
	e.stopPropagation();
	} );
  

 @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
            @import "https://use.fontawesome.com/releases/v5.2.0/css/all.css";
            .bg-grey{
              background:#f5f5f5;
            }.t-blog-list-sidebar ul:nth-child(2) li.no-a {
              border: 1px solid #333;
            }
            section#t-page-title .t-sub-header {
                margin-bottom: 30px;
            }
            #t-page-title .t-sub-header h2 {
                font-weight: 400;
                text-transform: uppercase;
            }
            .h-tab{
                margin-top: 130px;
            }
            .h-tab .container span {
                display: inline-block;
                cursor: pointer;
                padding: 28px 40px;
            }
        
            .h-tab .container a span h3 {
                font-size: 27px;
            	text-transform: uppercase;
            	color: #fff;
            }
            .h-tab .container a span.active h3 {
                font-weight: 500;
            }
            #t-page-title {
                position: relative;
                padding: 15px 0;
                background-color: #F5F5F5;
                border-bottom: 1px solid #EEE;
            }
            #t-page-title .breadcrumb {
                position: absolute !important;
                width: auto !important;
                left: 15px !important;
                margin: -5px 0 0 0 !important;
                background-color: transparent !important;
                padding: 0 !important;
                font-size: 12px;
            }
            .h-tab .container span.active {
                border-bottom: 7px solid #e87327;
                box-shadow: 0px 0px 20px -2px #ffffff;
            }
            ul.t-ul-r {
                float: right;
            }
            .t-recent-post {
                width: 100%;
                list-style-type: none;
            }
            .widget-sidebar li.t-recent-post .t-sub-header h3 i {
                font-size: 32px;
                padding-right: 5px;
            }
            .widget-sidebar li.t-recent-post .t-sub-header h3{
            	text-transform: uppercase;
            }
            .t-subbody ul.t-ul li:not(.no-a):hover {
                cursor: pointer;
                background: #e0e0e0;
            }
        
            .t-subbody ul.t-ul li {
                line-height: 11px;
                float: none;
                padding-left: 21px;
                padding: 4px;
                color: #676666;
                position: relative;
                cursor: pointer;
            }
            .t-subbody .t-ul li:before {
                content: "\f061";
                font-family: 'Font Awesome 5 Free';
            	font-weight: 900;
            	font-style: normal;
                padding-right: 2px;
                font-size: 10px;
            }
            li> ul.t-ul {
            	padding-top: 13px;
            	transition: .5s;
            }
            #t-page-title {
                margin-bottom: 16px;
            }
            .t-subbody .t-ul li.active:not(.no-a):after {
                content: "\00a0";
                width: 35px;
                height: 35px;
                background: #f5f5f5;
                position: absolute;
                transform: rotate(46deg);
                right: -33px;
                margin-top: -10px;
            }
            .t-subbody .t-ul li> ul li.active:not(.no-a):after {
            	right: -45px;
            }
            .t-subbody .t-ul li> ul li ul > li.active:not(.no-a):after {
            	right: -50px;
            }
            .t-subbody .t-ul li> ul li ul > li.active:not(.no-a):after {
                right: -55px;
            }
            .t-subbody .t-ul li> ul li > ul li > ul li.active:not(.no-a):after {
                right: -65px;
            }
            .t-subbody ul.t-ul li.no-a:after {
                content: "\f107";
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                padding-right: 2px;
                font-size: 18px;
            	position: absolute;
            	top:0;
            	font-style: normal;
                right: 17px;
                transition: .2s;
            }
            .t-subbody ul.t-ul li.no-a.rev:after {
            	transition: .2s;
            	transform: rotate(180deg);
            }
            .t-entry .entry-c {
                background: #fff;
                box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
                position: relative;
                padding: 24px;
                border-radius: 2px;
                margin: 20px 0;
            }
            li.t-recent-post p small {
                display: block;
                margin-top: 10px;
                padding-bottom: 11px;
                border-bottom: 1px solid #b9b9b9;
            }
            .t-blog-list-sidebar ul{
              list-style:none;
              padding-left:0px;
            }
            /* blog css end */

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="section">
  <div class="container ">
    <div class="col-md-3 col-sm-3">
      <div class="widget-sidebar">
        <h2 class="title-widget-sidebar">TUTORIAL</h2>
        <div class="t-blog-list-sidebar">
          <ul>
            <li class="t-recent-post">
              <div class="t-sub-header">
                <h3><i class="fab fa-java"></i> java</h3>
              </div>
              <div class="t-subbody">
                <ul class="entry-meta clearfix t-ul">
                  <li class='active'> menu-1 </li>
                  <li> menu-2 </li>
                  <li class="no-a"> menu-3 start
                    <ul class="t-ul collapse">
                      <li>menu-3.1 </li>
                      <li class="no-a"> menu-3.2
                        <ul class="t-ul collapse">
                          <li class="no-a"> menu-3.2.1
                            <ul class="t-ul collapse">
                              <li> menu-3.2.1.1 </li>
                              <li> menu-3.2.1.2 </li>
                            </ul>
                          </li>
                          <li> menu-3.2.2 </li>
                        </ul>
                      </li>
                      <li> menu-3.3 </li>
                    </ul>
                  </li>
                </ul>
              </div>
              <p><small><i class="fa fa-calendar" data-original-title="" title=""></i>15 November 2014</small> </p>
            </li>
          </ul>
         <ul>
            <li class="t-recent-post">
              <div class="t-sub-header">
                <h3><i class="fab fa-java"></i> java</h3>
              </div>
              <div class="t-subbody">
                <ul class="entry-meta clearfix t-ul">
                  <li class='active'> menu-1 </li>
                  <li> menu-2 </li>
                  <li class="no-a"> menu-3 start
                    <ul class="t-ul collapse">
                      <li>menu-3.1 </li>
                      <li class="no-a"> menu-3.2
                        <ul class="t-ul collapse">
                          <li class="no-a"> menu-3.2.1
                            <ul class="t-ul collapse">
                              <li> menu-3.2.1.1 </li>
                              <li> menu-3.2.1.2 </li>
                            </ul>
                          </li>
                          <li> menu-3.2.2 </li>
                        </ul>
                      </li>
                      <li> menu-3.3 </li>
                    </ul>
                  </li>
                </ul>
              </div>
              <p><small><i class="fa fa-calendar" data-original-title="" title=""></i>15 November 2014</small> </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-9 col-sm-9 small-thumbs bg-grey">
      <section id="t-page-title">
        <div class="t-sub-header">
          <h2><i class="fab fa-java"></i> java</h2>
        </div>
        <div class="container clearfix">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12">
              <ol class="breadcrumb">
                <li><a href="#">Tutorial</a> </li>
                <li class="active">java</li>
              </ol>
            </div>
          </div>
        </div>
      </section>
      <div class="clearfix t-entry"> 
        
        <!--						card start -->
        <div class="entry-c">
          <div class="entry-title">
            <h2><a href="blog/Android-market-in-India">Android market in India</a></h2>
          </div>
          <div class="entry-content">
            <p> </p>
            <p class="MsoNormal"><span lang="EN-IN">India, as all know, is a land of diversity. A home to myriad cultures, this land has been binding them together,since decades. Year by year, time to time, as the country lurked somewhere on the map on technological growth, now is the time when it has emerged from hibernation. India today is a ripe market for all technological predators. From television to mobile phone; from laptops to phablets; Indians now have climbed the technological ladder, each time a rung higher.</span> </p>
            <p></p>
          </div>
          <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12">
              <ul class="entry-meta clearfix t-ul">
                <li><i class="icon-thumbs-up"></i> 12 </li>
                <li><i class="icon-comments"></i> 24 </li>
              </ul>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
              <ul class="entry-meta clearfix t-ul-r">
                <li><i class="icon-calendar3"></i> 3:05 pm on Saturday 15 November 2014 </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="entry-c">
          <div class="entry-title">
            <h2><a href="blog/Android-market-in-India">Android market in India</a></h2>
          </div>
          <div class="entry-content">
            <p> </p>
            <p class="MsoNormal"><span lang="EN-IN">India, as all know, is a land of diversity. A home to myriad cultures, this land has been binding them together,since decades. Year by year, time to time, as the country lurked somewhere on the map on technological growth, now is the time when it has emerged from hibernation. India today is a ripe market for all technological predators. From television to mobile phone; from laptops to phablets; Indians now have climbed the technological ladder, each time a rung higher.</span> </p>
            <p></p>
          </div>
          <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12">
              <ul class="entry-meta clearfix t-ul">
                <li><i class="icon-thumbs-up"></i> 12 </li>
                <li><i class="icon-comments"></i> 24 </li>
              </ul>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
              <ul class="entry-meta clearfix t-ul-r">
                <li><i class="icon-calendar3"></i> 3:05 pm on Saturday 15 November 2014 </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="entry-c">
          <div class="entry-title">
            <h2><a href="blog/Android-market-in-India">Android market in India</a></h2>
          </div>
          <div class="entry-content">
            <p> </p>
            <p class="MsoNormal"><span lang="EN-IN">India, as all know, is a land of diversity. A home to myriad cultures, this land has been binding them together,since decades. Year by year, time to time, as the country lurked somewhere on the map on technological growth, now is the time when it has emerged from hibernation. India today is a ripe market for all technological predators. From television to mobile phone; from laptops to phablets; Indians now have climbed the technological ladder, each time a rung higher.</span> </p>
            <p></p>
          </div>
          <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12">
              <ul class="entry-meta clearfix t-ul">
                <li><i class="icon-thumbs-up"></i> 12 </li>
                <li><i class="icon-comments"></i> 24 </li>
              </ul>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
              <ul class="entry-meta clearfix t-ul-r">
                <li><i class="icon-calendar3"></i> 3:05 pm on Saturday 15 November 2014 </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="entry-c">
          <div class="entry-title">
            <h2><a href="blog/Android-market-in-India">Android market in India</a></h2>
          </div>
          <div class="entry-content">
            <p> </p>
            <p class="MsoNormal"><span lang="EN-IN">India, as all know, is a land of diversity. A home to myriad cultures, this land has been binding them together,since decades. Year by year, time to time, as the country lurked somewhere on the map on technological growth, now is the time when it has emerged from hibernation. India today is a ripe market for all technological predators. From television to mobile phone; from laptops to phablets; Indians now have climbed the technological ladder, each time a rung higher.</span> </p>
            <p></p>
          </div>
          <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12">
              <ul class="entry-meta clearfix t-ul">
                <li><i class="icon-thumbs-up"></i> 12 </li>
                <li><i class="icon-comments"></i> 24 </li>
              </ul>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
              <ul class="entry-meta clearfix t-ul-r">
                <li><i class="icon-calendar3"></i> 3:05 pm on Saturday 15 November 2014 </li>
              </ul>
            </div>
          </div>
        </div>
        <!--						card start  end--> 
      </div>
    </div>
  </div>
</section>