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），它完美无缺。如果我同时只有头代码中最低的一个工作。

我试过移动它们来改变顺序，将脚本放在我的html下面的元素而不是使用$（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图片上添加了一些图片链接，以测试您的滑块。

它似乎按预期工作。

＆＃13;

$(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,
  });
});

＆＃13;

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

＆＃13;

头部的第一个javascript脚本不会运行，但第二个会运行

1 个答案: