BootStrap dropdown menu After clicking does not appear drop-down menu (Pull-down menu does not eject) solution _javascript Tips

Source: Internet
Author: User

Recently learned to bootstrap Drop-down menu, learned the content of the tutorial after tapping a click button to pop down the menu of small demo, write code found after running click the button did not respond, the Drop-down menu is not out, the comparison of the tutorial feel code right.

My code is as follows:

<! 
 DOCTYPE html>  

Try pasting the code in the tutorial, running it correctly, and then trying to replace the code in the body with the tutorial code, then it doesn't work correctly. The problem is locked in the introduced script file. Comparing the files on the remote server used in the tutorial, we found that the Bootstrap.js and Jquery-3.1.1.js were introduced in a different order than my demo. He introduced the Jquery-3.1.1.js first and then introduced Bootstrap.js.

Opera browser "Check elements" open the console running the Web page, found red, as follows:

Presumably, Bootstrap.js needs jquery-3.1.1.js. And we first introduced bootstrap.js and then introduced Jquery-3.1.1.js, resulting in the script when the bootstrap related rules can not find the content required in jquery, so red.

Modify the order of the introduced files to allow the jquery script to be imported before the bootstrap script, as follows:

<script type= "Text/javascript" src= ". /libs/jquery-3.1.1.js "></script>
<script type=" Text/javascript "src=". /libs/bootstrap-3.3.7/js/bootstrap.js "></script>

You can resolve bugs that are not ejected by the Drop-down menu. The effect is as follows:

Bootstrap.js Plug-ins are implemented based on Jquery.js, and the code between our head is parsed from the top down to perform loading, so we have to introduce the Jquery.js file before we can use bootrap.js, we need to pay special attention to their introduction order in future use.

The above is a small set to introduce the bootstrap Drop-down menu will not appear after the Drop-down menu (Pull-down menu does not pop) solution, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.