Question

我为自己制作了手风琴菜单，但我遇到了问题。当我第一次点击＆＃39; li＆＃39;元素slideUp不起作用。

＆＃13;

$(document).ready(function() {
  $('#menu ul li a').click(function(e) {
    e.preventDefault();

    if ($(this).parent().hasClass('active')) {
      if ($(this).next().is(':visible')) {
        $(this).next().slideUp();
        $(this).parent().removeClass('active');
      } else {
        $(this).next().slideDown();
      }
    } else {
      $('#menu ul li').each(function() {
        $(this).removeClass('active');
      });
      $('#menu ul li ul').slideUp();
      $(this).next().slideDown();
      $(this).parent().addClass('active');
    }
  });
});

＆＃13;

#menu,
#menu ul,
#menu li,
#menu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  position: relative;
}

#menu a {
  line-height: 1.3;
}

#menu > ul > li {
  margin: 0;
}

#menu > ul > li:last-child {
  margin: 0;
}

#menu > ul > li > a {
  font-size: 15px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  padding: 5px;
}

#menu > ul > li > a > span {
  display: block;
  padding: 6px 10px;
  font-weight: bold;
}

#menu > ul > li > a:hover {
  text-decoration: none;
  background: #0074a2 url('../img/icons/menuActive.png') no-repeat 101%;
}

#menu > ul > li.active {
  border-bottom: none;
}

#menu > ul > li.active > a {
  background: #0074a2 url('../img/icons/menuActive.png') no-repeat 101%;
  color: #fff;
  text-shadow: 0 1px 1px #000;
}


/* Sub menu */

#menu ul ul {
  padding: 5px 12px;
  display: none;
  background: #333333;
}

#menu ul ul li {
  padding: 3px 0;
}

#menu ul ul a {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 10px 0;
}

#menu ul ul a:hover {
  color: #0074a2;
}

#menu ul li.active ul {
  display: block;
}

#menu ul li img {
  float: left;
  margin: -2px 4px 0 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <ul>
    <li class='has-sub active'><a href='#'><span>AAA</span></a>
      <ul>
        <li><a href='#'><span>AAA_1</span></a></li>
        <li><a href='#'><span>AAA_2</span></a></li>
        <li><a href='#'><span>AAA_3</span></a></li>
      </ul>
    </li>
    <li class='has-sub'><a href='#'><span>BBB</span></a>
      <ul>
        <li><a href='#'><span>BBB_1</span></a></li>
        <li><a href='#'><span>BBB_2</span></a></li>
      </ul>
    </li>
    <li class='has-sub last'><a href='#'><span>CCC</span></a>
      <ul>
        <li><a href='#'><span>CCC_1</span></a></li>
        <li><a href='#'><span>CCC_2</span></a></li>
        <li><a href='#'><span>CCC_3</span></a></li>
        <li><a href='#'><span>CCC_4</span></a></li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

这是我在jsfiddle中输入的简单代码。

jsfiddle

有人能告诉我哪里出错，怎么解决？

谢谢！

Answer 1

html的状态如下：
1.从开始：<ul>
2.点击一次后：<ul style="display: none;">
3.再次点击后：<ul style="display: block;">

现在谈到css时我并不是那么好，但是如果你跟踪按下它时动态的css，那么你就会知道你的造型缺少什么属性。

Answer 2

在完成active动画之前，问题是slideUp类已被删除。使用setTimeout功能如下。

setTimeout(function(){
   $(this).parent().removeClass('active')
}, 0);

如果需要，您可以增加时间。

<强>更新

我认为你的选择器应该是。

$('#menu > ul > li > a')

而不是

$('#menu ul li a')

Jquery slideUp在第一次点击

2 个答案: