1

我想使用 svg -element 通过单击 -element 来“切换”下拉列表（jquery twitter bootstrap）。这很重要，因为形状复杂的仪表板元素。只有当鼠标在路径元素内时，切换事件才可用。我已经构建了一个jsfiddle 示例来说明问题。因为我是一个 javasript 新手，所以很高兴能有任何钩子来开始。先感谢您！

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

4

1 回答 1

0

你可以尝试这样的事情：

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();
});

这是一个演示

于 2013-02-05T14:44:29.333 回答