slideToggle（）无法使用<ul>

Question

我正在尝试使用slideToggle（）函数创建一个子菜单，但它不起作用。我看到了一些示例，它位于<div>而不是<ul> s，所以它只与<div>一起使用？这是我的小提琴代码：Fiddle

我正在我的HTML中正确插入<script>标记，我的其他jQuery代码正确运行。

Answer 1

你在小提琴中缺少jQuery库。您的代码中也有拼写错误，回调函数应为function()而不是Function()

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>;

＆＃13;

＆＃13;

＆＃13;