Question

我正在尝试构建手风琴，但是由于某种原因我的jQuery文件没有被拾取。如果有人可以帮助我，我将非常感激。这就是我的

HTML

$(document).ready(function() {
  $('.list').on('click', '.list-control', function(e) {
    e.preventDefault();
    $(this).next('list-content').not(':animated').slideToggle();
  });
});

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title> Clever Oscar </title>
  <link rel="stylesheet" src="main.css">
</head>
<!--start of body-->

<body>
  <h1>Clever Oscar</h1>
  <ul class="list">
    <li>
      <button class="list-control">
					Phase one
				</button>
      <div class="list-content">
        Panal Context
      </div>
    </li>
  </ul>


  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>

Answer 1

在jquery.slim.js动画效果中，如：

jQuery.easing，jQuery.Animation，jQuery.speed

被删除，所以使用普通的jQuery。您还会错过.上课。

$(document).ready(function() {
  $('.list').on('click', '.list-control', function(e) {
    e.preventDefault();
    $(this).next('.list-content').not(':animated').slideToggle();
  });
});

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title> Clever Oscar </title>
  <link rel="stylesheet" src="main.css">
</head>
<!--start of body-->

<body>
  <h1>Clever Oscar</h1>
  <ul class="list">
    <li>
      <button class="list-control">
					Phase one
				</button>
      <div class="list-content">
        Panal Context
      </div>
    </li>
  </ul>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>

也看到这个古老的问题。 What are the differences between normal and slim package of jquery?

Answer 2

尝试一下：由于您缺少$(this).next('list-content')，因此请将其更改为$(this).next('.list-content')。

接下来，您只需要使用简单的jquery库即可实现这一目标。

您还可以通过使用.hide()和.show()函数来实现此目的。

    $(document).ready(function(){
    	$('.list').on('click','.list-control', function(e){
    		e.preventDefault();
    		$(this).next('.list-content').not(':animated').slideToggle() 
            // you may also able to use hide() and show()
    	});
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML> 
    <html>
    	<head>
            
    		
    		<meta charset="UTF-8">
    		<title> Clever Oscar </title>
    		<link rel="stylesheet" src="main.css">
    	</head>
    						<!--start of body-->
    	<body>
    		<h1>Clever Oscar</h1>
    		<ul class="list">
    			<li>
    				<button class="list-control">
    					Phase one
    				</button>
    				<div class="list-content">
    					Panal Context
    				</div>
    			</li>
    		</ul>
    		
    		
    	</body>

    		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    		<script src="script.js"></script>
    </html>

jQuery文件不起作用

2 个答案: