文章/答案/技术大牛

发布

社区首页 >问答首页 >如何通过点击svg-path来切换twitter bootstrap jquery下拉菜单？

问如何通过点击svg-path来切换twitter bootstrap jquery下拉菜单？
EN

Stack Overflow用户

提问于 2013-02-05 21:25:46

回答 1查看 1.9K关注 0票数 1

我想使用通过在-element内部单击来“切换”下拉菜单(jquery twitter bootstrap)。这一点很重要，因为存在复杂形状的仪表板元素。只有当鼠标位于path元素内时，切换事件才可用。我已经构建了一个jsfiddle example来说明这个问题。因为我是一个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>

drop-down-menu

svg

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-02-05 22:44:29

您可以尝试如下所示：

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

这是一个

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14708620

复制

相似问题

问如何通过点击svg-path来切换twitter bootstrap jquery下拉菜单？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过点击svg-path来切换twitter bootstrap jquery下拉菜单？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过点击svg-path来切换twitter bootstrap jquery下拉菜单？
EN