添加jQuery Datepicker后导航栏Dropdown菜单无法正常工作

Hey there, let's figure out why your dropdown menu broke once you added the datepicker. The root cause here is incorrect JavaScript loading order—and there's a tiny bug in your datepicker code too. Let's fix this step by step:

1. Fix the JS Loading Order #

Bootstrap Datepicker depends entirely on jQuery to work. Right now, you're loading the datepicker JS before jQuery, which means the datepicker can't initialize properly, and this messes up other jQuery-dependent components (like your Bootstrap dropdown).

Here's the corrected order for your scripts:

<!-- Load jQuery FIRST -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Then load Bootstrap Datepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<!-- Don't forget: If you're using Bootstrap's dropdown, you need Bootstrap's JS too (load it after jQuery) -->
<!-- <script src="path/to/your/bootstrap.min.js"></script> -->

Keep your datepicker CSS where it is (in the <head> section)—that part is fine.

2. Clean Up Your Datepicker Code #

Your $(document).ready() function has an extra line that's causing an error: event.preventDefault();. This line doesn't belong here (there's no event to prevent in the ready callback), and it'll throw an "event is not defined" error which can break other scripts.

Here's the fixed datepicker script:

<script type="text/javascript">
$(document).ready(function () {
    $('#from').datepicker({
        autoclose: true,
        format: "dd/mm/yyyy"
    });
});
</script>

3. Double-Check Bootstrap Dependencies #

Your dropdown uses Bootstrap's data-toggle="dropdown" attribute, which requires Bootstrap's JavaScript to function. Make sure you've included Bootstrap's JS file in your code (after jQuery, of course)—if you missed it, adding that will ensure the dropdown works as expected.

Once you make these changes, both your datepicker and dropdown menu should work correctly!

内容的提问来源于stack exchange，提问作者Revathi