Question

在我的html.css中，这就是我调用.js文件的方式 <script src="slideul.js"></script>它位于正文的结束标记之后。我按照步骤操作，但我不知道问题是什么。我需要首先隐藏ul然后在用户单击按钮时弹出ul。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Jquery .slideToggle（）无法单击按钮

1 个答案: