Question

当我单击菜单li时，将显示其自己的子菜单ul。它运行完美，但是我想使用.css和if语句进行切换。我写了这段代码，但是没有用。

var asd = $('#aa ul li > ul')
$('.es').click(function(){
  $(asd).css("display","inherit");
  if(asd.css("display") === "inherit"){
    asd.css("display","none")
  }
})

#aa {
  position: absolute;
  width:230px;
  height:100%;
  color:white;
  background: green;
  float:left;
}
        
#aa ul li {
  padding:12px;
  text-align: center;
  border-bottom: 1px solid white;
}

#aa ul li > ul {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="aa">
  <ul>
    <li>Maain</li>
    <li>Maain</li>
    <li class="es">Maain
      <ul>
        <li>maain 2</li>
      </ul>
    </li>
    <li>Maain</li>
    <li>Maain</li>
  </ul>

Answer 1

没有付出太多的努力。您可以只使用toggle()

$(asd).toggle();

var asd = $('#aa ul li > ul')
$('.es').click(function(){
    asd.toggle();
})

#aa {
    position: absolute;
    width:230px;
    height:100%;
    color:white;
    background: green;
    float:left;
}

#aa ul li {
    padding:12px;
    text-align: center;
    border-bottom: 1px solid white;
}

#aa ul li > ul {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="aa">
  <ul>
      <li>Maain</li>
      <li>Maain</li>
      <li class="es">Maain
          <ul>
              <li>maain 2</li>
          </ul>
      </li>
      <li>Maain</li>
      <li>Maain</li>
  </ul>
</div>

Answer 2

我更喜欢在课堂上做这种事情。 （更快更美观）

使用

.toggleClass('Active')

AND

#aa ul li>ul.Active {
  display: none;
}

完整示例

$('.es').off('click').on('click', function() {
  $('#aa ul li > ul').toggleClass('Active');
});

#aa {
  position: absolute;
  width: 230px;
  height: 100%;
  color: white;
  background: green;
  float: left;
}

#aa ul li {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid white;
}

#aa ul li>ul {
  display: inherit;
}

#aa ul li>ul.Active {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="aa">
  <ul>
    <li>Maain</li>
    <li>Maain</li>
    <li class="es">Maain
      <ul>
        <li>maain 2</li>
      </ul>
    </li>
    <li>Maain</li>
    <li>Maain</li>
  </ul>

如何使菜单子显示通过if语句继承

2 个答案: