CODEWITHSUNDEEP
jqueryasp.nettwitter-bootstrapasp.net-mvc-4drop-down-menu
Donkeyy
Donkeyy

Reputation: 51

Bootstrap in MVC 4 -> Dropdown doesn`t work

First: I found some topics about this, but they don´t worked for me. Twitter Bootstrap drop down menu not working , Bootstrap drop-down menus and tabbable tabs on Docpad

I built the same page in Netbeans IDE and it worked, but in VS 2013 Ultimate it doesn`t work.

Page:

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="~/Scripts/jquery-1.9.0.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<script>
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });

</script>
</head>
<body>
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a>   </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
    </ul>
</div>
<div>TODO write content</div>
</body>
</html>

best regards

Upvotes: 2

Views: 3765

Answers (1)

Mivaweb
Mivaweb

Reputation: 5712

At first view I don't see any mistakes. I created a fiddle with your code and nothing else and its working.

Are you sure that your required js files are loaded succesfully?

Jsfiddle: http://jsfiddle.net/VDesign/61ecg41n/

HTML

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a>   </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
    </ul>
</div>
<div>TODO write content</div>

JS

$(document).ready(function () {
    $('.dropdown-toggle').dropdown();
});

Upvotes: 1

Related Questions