在 jquery 之前根据父项动态设置子项样式

Question

我想知道我是否可以用Jquery动态地为孩子设置样式。让我解释一下。我正在制作一个移动菜单，我将其设置为每个li部分只需要子级，然后它中的任何ul都会变成一个孩子，当单击时向上/向下滑动(如手风琴(隐藏/显示选项。我可以做无数次。我想知道我是否可以让这些列表的背景颜色取决于它前面的列表的背景颜色。例如，如果 li 子级 1 的背景颜色为 #cccccc，那么(动态地(我希望 li 子级 2 意识到其父级的背景颜色为 #cccccc，并执行一些将十六进制代码更改为背景色为 #bbbbbb 和 li 子级 3 的操作，以实现其父级的背景颜色为 #bbbbbb 并执行一些将十六进制代码更改为具有背景的操作#aaaaaa 的颜色...等。我的问题是做某事部分。我已经单独抓取了这些关卡中的每一个，但我的问题是它们的背景颜色。

CSS是从预编译器生成的，这就是为什么它看起来很奇怪。我通常使用较少。

var hasChildren = $('.mobile-options').find('li > a');
function closeMenu(){
    $(".mobile-menu").animate({'width':'0','min-width':'0'}, 300);
    $('body').css({'overflow-y': 'auto'});
    $('.hamburger').removeClass('open');
    $('.page-overlay').fadeOut(300);
    // slides up all open menu items when menu closes
    if(hasChildren.hasClass('open')){
        hasChildren.removeClass('open');
        hasChildren.siblings('ul').delay(300).slideUp('fast');
    }
}
function dependsOnMenuButton(){
    if($('.hamburger').hasClass('open')){
        $(".mobile-menu").animate({'width':'60%','min-width':'300px'}, 300);
        $('body').css({'overflow-y': 'hidden', 'overflow-x':'hidden'});
        $('.page-overlay').fadeIn(300);
    } else {
        closeMenu();
    }
}
$(document).ready(function(){
    $('li').each(function(){
        if($(this).parent().parent('.children').length){
            $(this).children('a').css({'background':'yellow'});
        }
    });
    
    // allows hamburger-container, hamburger, or hamburger > span to be clicked. 
    //it does: hamburger-container or any children -> toggleClass Open
    $(".hamburger-container").click(function(){
        $(this).children('.hamburger').toggleClass('open');
        dependsOnMenuButton();
    });
    //accordion code
    //all accordion items content
    var allPanels = $('.mobile-options').find('li > ul');
    // hides all child pages lists
    allPanels.hide();
        
    //on click function for if an A tag has class children and sliding up/down their children
    hasChildren.click(function() {
        if($(this).hasClass('open')){
            $(this).removeClass('open');
            $(this).siblings('ul').slideUp('fast');
            // removes the class open and slides up any and all OPEN children with children elements
            $(this).parent('li').find('li.children > a').removeClass('open');
            $(this).parent('li').find('li.children > ul').slideUp('fast');
        } else if($(this).parent('li').hasClass('children')){
            $(this).siblings('ul').slideDown('fast');
            $(this).addClass('open');
        }
    });
});
//if user clicks outside of the menu -> close the menu
$(document).on('click', function (e){
    if($('.hamburger').hasClass('open') && $('.page-overlay').is(e.target)){
        closeMenu();
    }
});

* {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html,
body {
  height: 100%;
}
.add-flex {
  display: flex;
  display: -webkit-flex;
}
.page-overlay {
  background: #333;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  opacity: 0.5;
  display: none;
}
.hamburger-container {
  background: #990000;
  top: 0;
  right: 0;
  position: absolute;
  padding: 20px;
  cursor: pointer;
  z-index: 2000;
}
.hamburger-container .hamburger {
  width: 35px;
  height: 34px;
  position: relative;
  visibility: visible;
}
.hamburger-container .hamburger span {
  display: block;
  position: absolute;
  height: 6px;
  width: 100%;
  background: #fff;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  visibility: visible;
}
.hamburger-container .hamburger span:nth-child(1) {
  top: 0px;
}
.hamburger-container .hamburger span:nth-child(2),
.hamburger-container .hamburger span:nth-child(3) {
  top: 14px;
}
.hamburger-container .hamburger span:nth-child(4) {
  top: 28px;
}
.hamburger-container .hamburger.open span:nth-child(1) {
  top: 14px;
  width: 0%;
  left: 50%;
}
.hamburger-container .hamburger.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.hamburger-container .hamburger.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.hamburger-container .hamburger.open span:nth-child(4) {
  top: 14px;
  width: 0%;
  left: 50%;
}
.mobile-menu {
  height: 100%;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 15;
  box-shadow: 3px 0 15px 0 #131313;
}
.mobile-menu .mobile-menu-content {
  width: 60vw;
  min-width: 300px;
  height: 100%;
  position: relative;
  flex-direction: column;
}
.mobile-menu .mobile-menu-content .mobile-search {
  height: 150px;
  background: #fff;
  width: 100%;
}
.mobile-menu .mobile-menu-content ul {
  list-style: none;
  padding: 0 !important;
}
.mobile-menu .mobile-menu-content .mobile-options {
  background: #fff;
  height: calc(100% - 150px);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.mobile-menu .mobile-menu-content .mobile-options li {
  width: 100%;
}
.mobile-menu .mobile-menu-content .mobile-options li a {
  padding: 30px;
  text-decoration: none;
  color: #000;
  display: flex;
  display: -webkit-flex;
  font-weight: 500;
  font-size: 1.2rem;
}
.mobile-menu .mobile-menu-content .mobile-options li a:visited {
  color: #000;
}
.mobile-menu .mobile-menu-content .mobile-options li a:hover {
  background: #990000 !important;
  color: #fff;
  transition: .2s;
}
.mobile-menu .mobile-menu-content .mobile-options li a span {
  max-width: 60%;
}
.mobile-menu .mobile-menu-content .mobile-options .children > a {
  position: relative;
}
.mobile-menu .mobile-menu-content .mobile-options .children > a::after {
  content: ">";
  position: absolute;
  right: 30px;
  transition: .2s;
}
.mobile-menu .mobile-menu-content .mobile-options .children > a.open {
  background: #990000;
  color: #fff;
}
.mobile-menu .mobile-menu-content .mobile-options .children > a.open::after {
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari 3.1+ */
  -moz-transform: rotate(90deg);
  /* Firefox 3.5-15 */
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -o-transform: rotate(90deg);
  /* Opera 10.50-12.00 */
  transform: rotate(90deg);
  /* Firefox 16+, IE 10+, Opera 12.10+ */
}
.mobile-menu .mobile-menu-content .mobile-options .children > a.open:hover {
  background: #7a1705 !important;
}
.mobile-menu .mobile-menu-content .mobile-options .children ul {
  background: #eeedeb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Simple Mobile Menu</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="content/site.css">
    </head>
    <body>
        <!-- beginning of mobile menu button -->
        <div class="hamburger-container">
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <!-- end of mobile menu button -->
        <!-- beginning of mobile menu -->
        <div class="mobile-menu">
            <div class="mobile-menu-content add-flex">
                <div class="mobile-search"></div>
                <ul class="mobile-options">
                    <li class="children">
                        <a href="#">I have a child</a>
                        <ul>
                            <li class="children">
                                <a href="#">I'm a child with children</a>
                                <ul>
                                    <li class="children">
                                        <a href="#">Some</a>
                                        <ul>
                                            <li><a href="#">Another</a></li>
                                            <li><a href="#">Another</a></li>
                                            <li><a href="#">Another</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Some</a></li>
                                    <li><a href="#">Some</a></li>
                                </ul>
                            </li>
                            <li><a href="#">I'm a child</a></li>
                            <li><a href="#">I'm a child</a></li>
                            <li><a href="#">I'm a child</a></li>
                            <li><a href="#">I'm a child</a></li>
                            <li><a href="#">I'm a child</a></li>
                            <li><a href="#">I'm a child</a></li>
                        </ul>
                    </li>
                    <li><a href="#">I don't have a child</a></li>
                    <li><a href="#">I don't have a child</a></li>
                    <li class="children">
                        <a href="#">I have a child</a>
                        <ul>
                            <li><a href="#">I'm a child</a></li>
                            <li class="children">
                                <a href="#">I have a child</a>
                                <ul>
                                    <li><a href="#">I'm a child</a></li>
                                    <li><a href="#">I'm a child</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- end of mobile menu -->
        <!-- page overlay -->
        <div class="page-overlay"></div>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

Answer 1

哇，有很多代码需要拖网。

是的，这是可以实现的，但是尝试一个聪明的小技巧会更容易。

1. 只需设置背景颜色(在本例中为 #000; (
2. 将列表项设置为使用具有 Alpha 透明度的 rgba 颜色。 这将允许颜色随着每个渐进式图层而变亮或变暗。 ( rgba(255, 255, 255, 0.5); (

下面是使用列表项的简单示例。

.mobile-options,
.mobile-options li{
  list-style:none;
  padding:5px;
  background:#000;
}
.mobile-options a{
  color:#b00;
  text-decoration:none;
}
.mobile-options li {
  background: rgba(255, 255, 255, 0.5);
}

<ul class="mobile-options">
  <li class="children">
    <a href="#">I have a child</a>
    <ul>
      <li class="children">
        <a href="#">I'm a child with children</a>
        <ul>
          <li class="children">
            <a href="#">Some</a>
            <ul>
              <li><a href="#">Another</a></li>
              <li><a href="#">Another</a></li>
              <li><a href="#">Another</a></li>
            </ul>
          </li>
          <li><a href="#">Some</a></li>
          <li><a href="#">Some</a></li>
        </ul>
      </li>
      <li><a href="#">I'm a child</a></li>
      <li><a href="#">I'm a child</a></li>
      <li><a href="#">I'm a child</a></li>
      <li><a href="#">I'm a child</a></li>
      <li><a href="#">I'm a child</a></li>
      <li><a href="#">I'm a child</a></li>
    </ul>
  </li>
  <li><a href="#">I don't have a child</a></li>
  <li><a href="#">I don't have a child</a></li>
  <li class="children">
    <a href="#">I have a child</a>
    <ul>
      <li><a href="#">I'm a child</a></li>
      <li class="children">
        <a href="#">I have a child</a>
        <ul>
          <li><a href="#">I'm a child</a></li>
          <li><a href="#">I'm a child</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>