头部的第一个JavaScript脚本不运行，但第二个是

Question

我对JavaScript和jQuery相当陌生，不明白为什么只有头部中的两个脚本中的一个工作正常。

我在我的页面的头部下面的代码：

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script src="../../js/jquery.slicknav.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function menu(){ 
     $('#nav_menu') .slicknav({prependTo:"#mobile_menu"}); 
    }); 
</script> 
<link rel="stylesheet" href="../../styles/jquery.bxslider.css"> 
<script src="./js/jquery.bxslider.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function slideshow(){ 
     $('#slider') .bxSlider({ 
      auto: true, 
      autoControls: true, 
      minSlides: 1, 
      maxSlides: 10, 
      slideWidth: 650, 
     }); 
    }); 
</script> 

而且在我的身上，我有以下要素：

<nav id="mobile_menu"></nav> 
    <nav id="nav_menu"> 
    <ul> 
     <li><a class="current" href="#">Home</a></li> 
     <li><a href="./navigation/aboutus.html">About Us</a></li> 
     <li><a href="./navigation/products.html">Products</a></li> 
      <li><a href="#">Promotions</a> 
       <ul> 
     <li><a href="./navigation/backtoschool.html">Back-To-School</a></li> 
       </ul> 
     </li> 
     <li><a href="#"> What's New</a> 
      <ul> 
       <li><a href="./navigation/latestnews.html">Latest News</a></li> 
      </ul> 
     </li> 
     <li><a href="./navigation/team.html">Our Team</a></li> 
     <li><a href="./navigation/contact.html">Contact Us</a></li> 
    </ul> 
    </nav> 

，并

<ul id="slider"> 
     <li><img src="./images/1.png" alt="Parrot Products"></li> 
     <li><img src="images/2.png" alt="Office Machines"></li> 
     <li><img src="images/3.png" alt="Labelling"></li> 
     <li><img src="images/4.png" alt="Paper"></li> 
     <li><img src="images/5.png" alt="Files &amp; filing"></li> 
     <li><img src="images/6.png" alt="Office Accessories"></li> 
     <li><img src="images/7.png" alt="Toners &amp; Cartridges"></li> 
     <li><img src="images/8.png" alt="Art Supplies"></li> 
     <li><img src="images/9.png" alt="Colouring In"></li> 
     <li><img src="images/10.png" alt="Gifts"></li> 
     <li><img src="images/11.png" alt="Office Furniture"></li> 
     <li><img src="images/12.png" alt="Bibles"></li> 
     <li><img src="images/13.png" alt="Bible Repairs &amp; Indexing"></li> 
     <li><img src="images/14.png" alt="Bible Verse"></li> 
    </ul> 

随着只有我脑海中的两个脚本中的一个（slicknav或bxslider）能够完美运行。如果我只有头码中最低的一个，那么两者都有效。

我试着移动它们来改变顺序，将脚本放置在元素下面的元素中，而不是使用$（document）.ready（）并将它们放到$（document）.ready（）部分中。

任何有关如何让这两个人一起工作的建议将不胜感激，甚至只是解释什么问题是在未来尝试和避免它。

Answer 1

试试这个，

我全部换成你的脚本与存储在CDN的（内容分发网络）的脚本引用这确保了脚本肯定被正确引用。

我也换了一些代码的周围，使即

$(document).ready(function menu() { 
    $('#nav_menu').slicknav({ 
    prependTo: "#mobile_menu" 
    }); 
}); 

成为更有意义：

$(document).ready(function menu() { 
    $('#mobile_menu').slicknav({ 
    prependTo: "#nav_menu" 
    }); 
}); 

我加入了hidden属性您<nav id="mobile_menu" hidden="hidden">标记，以便它隐藏在默认。

最后，我只是添加了一些链接到Google图像上的图像来测试你的滑块。

它似乎按预期工作。

$(document).ready(function menu() { 
 
    $('#mobile_menu').slicknav({ 
 
    prependTo: "#nav_menu" 
 
    }); 
 
}); 
 

 
$(document).ready(function slideshow() { 
 
    $('#slider').bxSlider({ 
 
    auto: true, 
 
    autoControls: true, 
 
    minSlides: 1, 
 
    maxSlides: 10, 
 
    slideWidth: 650, 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/jquery.slicknav.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/slicknav.min.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet" /> 
 

 
<nav id="nav_menu"></nav> 
 
<nav id="mobile_menu" hidden="hidden"> 
 
    <ul> 
 
    <li><a class="current" href="#">Home</a></li> 
 
    <li><a href="./navigation/aboutus.html">About Us</a></li> 
 
    <li><a href="./navigation/products.html">Products</a></li> 
 
    <li><a href="#">Promotions</a> 
 
     <ul> 
 
     <li><a href="./navigation/backtoschool.html">Back-To-School</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#"> What's New</a> 
 
     <ul> 
 
     <li><a href="./navigation/latestnews.html">Latest News</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="./navigation/team.html">Our Team</a></li> 
 
    <li><a href="./navigation/contact.html">Contact Us</a></li> 
 
    </ul> 
 
</nav> 
 

 
    <ul id="slider"> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Parrot Products"></li> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Office Machines"></li> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Labelling"></li> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Paper"></li> 
 
    <li><img src="images/5.png" alt="Files &amp; filing"></li> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Office Accessories"></li> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Toners &amp; Cartridges"></li> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Art Supplies"></li> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Colouring In"></li> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Gifts"></li> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Office Furniture"></li> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Bibles"></li> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Bible Repairs &amp; Indexing"></li> 
 
    <li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Bible Verse"></li> 
 
    </ul>