drop down menu - How to toggle twitter bootstrap jquery dropdown by clicking on svg-path? -
i want utilize svg -element "toggle" dropdown (jquery twitter bootstrap) clicking within -element. of import because of complexe shaped dashboard elements. toggle event should available if mouse within path element. i've build jsfiddle example illustrate problem. because i'm javasript newbie, nice hooks started. give thanks in advance!
<html><head><title></title> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen"></head> <body> <div class="dropdown"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> want action <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dlabel"> <li><a tabindex="-1" href="#">action</a> </li> <li><a tabindex="-1" href="#">another action</a> </li> <li><a tabindex="-1" href="#">something else here</a> </li> <li class="divider"></li> <li><a tabindex="-1" href="#">separated link</a> </li> </ul> </div> <div class="dropdown"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="150" height="30" id="test"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <g transform="translate(0,-850)" id="layer1"> <rect class="dropdown-toggle" width="150" height="30" ry="4" x="0" y="850" id="rect3013" style="fill:#ff0000;fill-opacity:1;stroke:none" /> </g> </a> <text x="60.42905" y="18.798733"> <tspan sodipodi:role="line" id="tspan3852" x="20" y="18.798733">toggle here </tspan> </text> </svg> <ul class="dropdown-menu" role="menu" aria-labelledby="dlabel"> <li><a tabindex="-1" href="#">action</a> </li> <li><a tabindex="-1" href="#">another action</a> </li> <li><a tabindex="-1" href="#">something else here</a> </li> <li class="divider"></li> <li><a tabindex="-1" href="#">separated link</a> </li> </ul> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script> </body>
you seek this:
html structure:
<div class="dropdown"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="150" height="30" id="test"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <g transform="translate(0,-850)" id="layer1"> <rect class="dropdown-toggle" width="150" height="30" ry="4" x="0" y="850" id="rect3013" style="fill:#ff0000;fill-opacity:1;stroke:none" /> </g> <text x="60.42905" y="18.798733"> <tspan sodipodi:role="line" id="tspan3852" x="20" y="18.798733">toggle here</tspan> </text> </a> </svg> <ul class="dropdown-menu" role="menu" aria-labelledby="dlabel"> <li><a tabindex="-1" href="#">action</a> </li> <li><a tabindex="-1" href="#">another action</a> </li> <li><a tabindex="-1" href="#">something else here</a> </li> <li class="divider"></li> <li><a tabindex="-1" href="#">separated link</a> </li> </ul> </div> then, when click on svg:
$("svg").on("click", function () { $("ul").fadein(200); }); also, close dropdown-menu when click outside of add together this:
$(document).on("click", ":not(svg *)", function (e) { $("ul").fadeout(200); e.stoppropagation(); }); here demo
jquery drop-down-menu svg
No comments:
Post a Comment