Question

制作手风琴菜单失去了它的滑动/向上功能我做错了什么？有人可以查看此代码

Jquery的

$(document).ready(function() {
    $('.nav-pills ul li').on('click touchstart', function(e) {
        e.preventDefault();

        var checkElement = $(this).next();

        $('.nav-pills li').removeClass('open');
        $(this).closest('li').addClass('open');

        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('open');
            checkElement.slideUp(300);
        }
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('nav-pills ul ul:visible').slideUp(300);
            checkElement.slideDown(300);
        }
        if($(this).closest('li').find('ul').children().length == 0){
            return true;
        }
        else {
            return false;
        }
    }); 
});

HTML

<div class="nav-container">
<div class="nav nav-pills nav-stacked">
  <ul class="nav nav-pills nav-stacked">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown">Is Landscape Architecture Right For Me?</a>
      <ul class="dropdown-menu">
        <li><a href="http://www.asla.org/design/index.html" target="_blank">What Is Landscape Architecture?</a></li>
        <li><a href="http://www.youtube.com/watch?v=zbx3FDDNeQM" target="_blank">I Want to Be a Landscape Architect (Video)</a>
        <li><a href="http://www.asla.org/ContentDetail.aspx?id=12206&PageTitle=Education&RMenuId=54">What Skills Do I Need?</a></li>
        <li><a href="http://www.bls.gov/ooh/architecture-and-engineering/landscape-architects.htm" target="_blank">Future Career Prospects (U.S. Labor Department)</a></li>
      </ul>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown">What Does A Landscape Architects Do?</a>
      <ul class="dropdown-menu">
        <li><a href="http://www.asla.org/ContentDetail.aspx?id=22922">Interviews with Leading Landscape Architects</a></li>
        <li><a href="http://www.asla.org/2013awards/index.html">ASLA Professional Awards</a></li>
        <li><a href="http://www.asla.org/2013studentawards/index.html">ASLA Student Awards</a></li>
        <li><a href="http://astore.amazon.com/a04806-20/detail/0470338458/190-5667858-4355216" target="_blank">Buy the Book:&nbsp;<em>Becoming A Landscape Architect</em></a></li>
      </ul>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown">Why Is Their Work So Important?</a>
      <ul class="dropdown-menu">
        <li><a href="http://www.asla.org/sustainablelandscapes/index.html">Designing Our Future: Sustainable Landscapes</a></li>
        <li><a href="http://www.asla.org/sustainablelandscapes/videos.html">ASLA Animations</a></li>
      </ul>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown">Where Can I Study?</a>
      <ul class="dropdown-menu">
        <li><a href="http://www.asla.org/schools.aspx">Picking A School</a></li>
        <li><a href="http://store.di.net/collections/reports" target="_blank">DesignIntelligence Rankings (2013)</a></li>
      </ul>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown">How Do I Learn More?</a>
      <ul class="dropdown-menu">
        <li><a href="http://www.asla.org/uploadedFiles/CMS/Education/Career_Discovery/2013%20ASLA%20Graduating%20Students%20Report%200%202.pdf" target="_blank">Graduating Student Surveys</a></li>
        <li><a href="http://www.acementor.org/" target="_blank">ACE Mentor Program</a></li>
        <li><a href="http://www.asla.org/studentchapters.aspx">Find An ASLA Student Chapter</a></li>
        <li><a href="http://www.asla.org/software.aspx">Learn New Software Programs</a></li>
        <li><a href="http://www.nps.gov/ncrc/programs/rtca/whatwedo/projects_by_state.html" target="_blank">Local Parks / Conservation Programs</a></li>
      </ul>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown">Personal Stories</a>
      <ul class="dropdown-menu">
        <li><a href="#">The Path</a></li>
        <li><a href="#">Obstacles</a></li>
        <li><a href="#">Aids</a></li>
      </ul>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown">About Columbus Circle</a>
      <ul class="dropdown-menu">
        <li><a href="http://asla.org/awards/2006/06winners/238.html">Learn More About Columbus Circle</a></li>
        <li><a href="img/0173ColCir_062_c_before.jpg">Before Photo</a></li>
      </ul>
    </ul>
    </div>
  </div>
</div>

CSS

.nav-pills > li > a {
    border-radius: 0px;
    line-height: 1.5;  
}

.nav-container {
    max-width: 26%;
    width: 280px;
    top: 90px;
    left: 45px;
    padding: 0;
    background-color: #000000; 
    position: fixed;
    z-index: 3;
    cursor: pointer;
}

.nav .open>a, 
.nav .open>a:hover, 
.nav .open>a:focus {
    background-color: #f26527;
    color: #ffffff;
}

.dropdown > a {
    color: #ffffff;
}

.dropdown-menu {
    border-radius: 0px;
    padding: 0px;
    position: relative;
    width: 345px;
    z-index: 4;
}

.dropdown-menu > li > a {
    line-height: 1.3;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: #f26527;
}

.dropdown-menu li {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Ariel", "sans-   serif";
    font-weight: 300;
    background: #ffffff;
    line-height: 1.5;
}

菜单和手风琴一样，但又失去了它的滑动功能，只是下降了

由于

Answer 1

我也遇到过这种情况，如果你在这里尝试了所有可能的解决方案，答案是列表无法动画，如果你试图为列表设置动画。最好的方法是将列表包装在div中。

手风琴子菜单不会滑落

1 个答案: