Jquery .slideToggle() 不适用于按钮单击

Question

在我的html.css这就是我如何称呼 .js文件 <script src="slideul.js"></script>它位于 body 的结束标记之后。我按照步骤操作，但不知道问题出在哪里。我需要先隐藏 ul，然后在用户单击按钮时弹出 ul。

$('.btnrefine').next('.list-unstyled').hide();
$('.btnrefine').click(function() {
  $(this).next('.list-unstyled').slideToggle();
});

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="category">
  <div class="title-bg">
    <h3 class="category-title"><button type="button" class="btnrefine"><i class="fa fa-bars" aria-hidden="true"></i></button><span>Categories</span></h3>
  </div>
  <ul class="list-unstyled">
    <li><a href="" title="">Men's Apparel</li>
	<li><a href="" title="">Mobile and Gadgets</a></li>
    <li><a href="" title="">Consumer Electronics</a></li>
    <li><a href="" title="">Miscellaneous</a></li>
    <li><a href="" title="">Men's Accessories</a></li>
    <li><a href="" title="">Men's Shoes</a></li>
    <li><a href="" title="">Food</a></li>
    <li><a href="" title="">Hobbies and Stationery</a></li>
    <li><a href="" title="">Toys, Kids and Babies</a></li>
    <li><a href="" title="">Bags</a></li>
    <li><a href="" title="">Women's Accessories</a></li>
    <li><a href="" title="">Women's Shoes</a></li>
    <li><a href="" title="">Sports and Outdoors</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

你想 slidetoggle带有 menubutton 的菜单单击查看下面的内容，您为什么尝试使用 .next()你有多个菜单列表吗？如果不是，你需要做一个简单的方法，否则你仍然需要使用 .parent().parent().next('.list-unstyled')并且您应该将脚本添加到头部内或 </body> 之前标签。

$(document).ready(function() {


  $('.list-unstyled').hide();
  $('.btnrefine').click(function() {
    //console.log($(this).parent().parent().next());
    $(this).parent().parent().next('.list-unstyled').slideToggle();
  });

  //if not multiple menus
  //  $('.list-unstyled').hide();
  // $('.btnrefine').click(function() {
  //  $('.list-unstyled').slideToggle();
  // });
})

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="category">
  <div class="title-bg">
    <h3 class="category-title">
      <button type="button" class="btnrefine">
      <i class="fa fa-bars" aria-hidden="true"></i>
      </button>
      <span>Categories</span>
    </h3>
  </div>
  <ul class="list-unstyled">
    <li><a href="" title="">Men's Apparel</li>
							<li><a href="" title="">Mobile and Gadgets</a></li>
    <li><a href="" title="">Consumer Electronics</a></li>
    <li><a href="" title="">Miscellaneous</a></li>
    <li><a href="" title="">Men's Accessories</a></li>
    <li><a href="" title="">Men's Shoes</a></li>
    <li><a href="" title="">Food</a></li>
    <li><a href="" title="">Hobbies and Stationery</a></li>
    <li><a href="" title="">Toys, Kids and Babies</a></li>
    <li><a href="" title="">Bags</a></li>
    <li><a href="" title="">Women's Accessories</a></li>
    <li><a href="" title="">Women's Shoes</a></li>
    <li><a href="" title="">Sports and Outdoors</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>