slideToggle() 不适用于 <ul>

Question

我正在尝试使用 slideToggle() 函数创建子菜单，但它不起作用。我看到了一些例子，它在 <div>s 而不是 <ul>s，所以它只适用于 <div>s ？这是我在 fiddle 上的代码：Fiddle

我在 HTML 和其他 jQuery 代码运行中正确插入了 <script> 标签。

Answer 1

您的 fiddle 中缺少 jQuery 库。您的代码中还有一个错字，回调函数应该是 function() 而不是 Function()

$(document).ready(function() {
  $('.mainmenu').click(function() {
    //             ----^----- f should be small letter
    $('.submenu').slideToggle('fast');
  });
});

.mainmenu {
  cursor: pointer;
  color: #ffffff;
  text-align: center;
  display: block;
}
.mainmenu p {
  font-size: 20px;
  line-height: 10px;
}
.submenu {
  list-style-type: none;
  padding: 0;
  text-align: center;
  border: 2px solid black;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background-color: #464646;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 5px;
  display: none;
}
.submenu li {
  border-bottom: 2px solid white;
}
.submenu li:last-child,
.submenu li:last-child a:last-child {
  border-bottom: 0;
  border-radius: 0 0 10px 10px;
}
.submenu a:hover {
  background-color: aliceblue;
  color: #000000;
}
#sidebar {
  background-color: white;
  float: right;
}
#sidebar>ul {
  list-style-type: none;
  margin: 0;
  padding: 20px;
}
#sidebar>ul >li {
  position: relative;
  width: 21em;
  background-color: #1a8891;
  border: 2px solid #0c383a;
  margin-bottom: 5px;
  border-radius: 20px;
}
#sidebar a:link,
#sidebar a:visited {
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: white;
  text-decoration: none;
}
#sidebar li:hover {
  background-color: #156b72;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">
  <ul>
    <li class="mainmenu">
      <div class="arrow-up"></div>
      <p>Text</p>
    </li>
    <ul class="submenu">
      <li><a href="">Text</a>
      </li>
      <li><a href="">Text</a>
      </li>
      <li><a href="">Text</a>
      </li>
      <li><a href="">Text</a>
      </li>
      <li><a href="">Text</a>
      </li>
    </ul>
    <li><a href="">Text</a>
    </li>
    <li><a href="">Text</a>
    </li>
    <li><a href="">Text</a>
    </li>
    <li><a href="">Text</a>
    </li>
    <li><a href="">Text</a>
    </li>
  </ul>
</div>;

slideToggle() 不适用于 <ul>

slideToggle() not working withe <ul>

html

javascript

css

jquery

slidetoggle