Question

我的HTML就像这样

<div id="cssmenu">
<ul>
    <li class="has-sub open ">
        <a href="/rigging.aspx " >  rig </a>
        <ul>
            <li class="has-sub ">
                <a href="/rigging/rigging.aspx">  rigging  </a>                   
            </li>
            <li class="has-sub ">
                <a href="/rigging/rigging.aspx">rig-3 </a>
            </li>                
        </ul>
    </li>    
</ul>

在页面加载时，如果任何<li>具有类open，我希望其子<ul>元素向下滑动。我写过类似的东西

    $(document).ready(function () {
    if ($('#cssmenu li').hasClass('open')) {
        $(this).children('ul').slideDown();        
    }
}

但它不起作用（滑落不发生）任何人都可以指出我在这里缺少的东西吗？

Answer 1

这将选择具有类ul的li的所有.open子项并应用slideDown。

$('#cssmenu li.open > ul').slideDown();

＆＃13;

$('li.has-sub > ul').slideDown();

＆＃13;

.has-sub > ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="has-sub open ">
    <a href="/rigging.aspx ">  rig </a>
    <ul>
      <li class="has-sub ">
        <a href="/rigging/rigging.aspx">  rigging  </a> 
      </li>
      <li class="has-sub ">
        <a href="/rigging/rigging.aspx">rig-3 </a>
      </li>
    </ul>
  </li>
  <li class="has-sub open ">
    <a href="/rigging.aspx ">  rig </a>
    <ul>
      <li class="has-sub ">
        <a href="/rigging/rigging.aspx">  rigging  </a> 
      </li>
      <li class="has-sub ">
        <a href="/rigging/rigging.aspx">rig-3 </a>
      </li>
    </ul>
  </li>
  <li class="has-sub">
    <a href="/rigging.aspx ">  rig </a>
    <ul>
      <li class="has-sub ">
        <a href="/rigging/rigging.aspx">  rigging  </a> 
      </li>
      <li class="has-sub ">
        <a href="/rigging/rigging.aspx">rig-3 </a>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

在页面加载时使子d1向下滑动

1 个答案: