根据父级jquery动态设置子级样式

Question

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

css是由预编译器生成的，这就是为什么它看起来很奇怪的原因。我通常使用LESS。

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>