如何通過點擊svg路徑來切換twitter bootstrap jquery下拉菜單？

我想使用svg -element通過點擊-element內部的「切換」下拉列表（jquery twitter bootstrap）。這很重要，因爲複雜形狀的儀表板元素。切換事件只有在鼠標位於路徑元素內時纔可用。我已經構建了一個jsfiddle example來說明問題。因爲我是一個javasript新手，所以很容易就可以開始。先謝謝你！如何通過點擊svg路徑來切換twitter bootstrap jquery下拉菜單？

<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="#"> 
    I want this 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 from 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>

來源

2013-02-05 PLI

你可以嘗試這樣的事：

HTML結構：

<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 from 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>

然後，當你點擊SVG：

$("svg").on("click", function() { 
    $("ul").fadeIn(200); 
});

另外，關閉下拉菜單，當你點擊它的外面，你可以補充一點：

$(document).on("click", ":not(svg *)", function (e) { 
    $("ul").fadeOut(200); 
    e.stopPropagation(); 
});

這裏是一個DEMO

來源

2013-02-05 14:44:29 Dim13i

真好！非常感謝你！ – PLI

如何通過點擊svg路徑來切換twitter bootstrap jquery下拉菜單？

回答

相關問題