CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sam
Sam

Reputation: 1666

BootStrap - DropDown

I'm trying to call the basic drop-down function that bootstrap offer, I hooked up a js function, setup links to the js. Tried non js everything doesn't work this is as close as I've got and its still a no go. This is my list - 

      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="index.html">Home</a></li>
          <li class="dropdown" id="accountmenu">  
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>  
                    <ul class="dropdown-menu">  
                        <li><a href="#">PHP</a></li>  
                        <li><a href="#">MySQL</a></li>  
                        <li class="divider"></li>  
                        <li><a href="#">JavaScript</a></li>  
                        <li><a href="#">HTML5</a></li>  
                    </ul>  
                </li>  
          <li><a href="#contact">News</a></li>
          <li><a href="http://MapleEdge.paycraft.co">Shop</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->> Blockquote

So it should just work with all the js hooked up but it doesn't you can see the live site here - http://www.epic-pvp.com/

thanks so much I've tried everything!

Upvotes: 0

Views: 281

Answers (3)

mark1234
mark1234

Reputation: 1121

I did mine as shown below.

HTML:

<ul class="nav navbar-nav navbar-right">
                    <li id="theme_selector" class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="caret"></b></a>
                        <ul id="theme" class="dropdown-menu" role="menu">
                            <li><a href="#">Amelia</a></li>
                            <li><a href="#">Cerulean</a></li>
                            <li><a href="#">Cyborg</a></li>
                            <li><a href="#">Cosmo</a></li>
                            <li><a href="#">Darkly</a></li>
                            <li><a href="#">Flatly</a></li>
                            <li><a href="#">Lumen</a></li>
                            <li><a href="#">Simplex</a></li>
                            <li><a href="#">Slate</a></li>
                            <li><a href="#">Spacelab</a></li>
                            <li><a href="#">Superhero</a></li>
                            <li><a href="#">United</a></li>
                            <li><a href="#">Yeti</a></li>
                        </ul>
                    </li>
                </ul>

Script

$('#theme li').click(function () {
   switch_style($(this).text());
        });

Works great

Upvotes: 0

Quentin
Quentin

Reputation: 943560

You include jQuery on line 193 of the HTML.

The first time you try to use jQuery is on line 24 of the HTML.

You can't use it before you load it.

Upvotes: 1

Ivan Ferić
Ivan Ferić

Reputation: 4763

You should have looked javascript errors - you clearly haven't included jquery library on the page..

Twitter bootstrap relies heavily on jQuery and they've documented on getting started page that you should include latest version of jQuery in your template for it to work..

Upvotes: 2

Related Questions