Question

所以我的导航开始如下（基于meganavbar.com）

<nav class="navbar navbar-blue-dark no-border-radius no-border navbar-static-top" role="navigation" id="wmpmega">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand_size_lg">
                            <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                        </button>
                    </div>

                    <div class="collapse navbar-collapse" id="navbar-brand_size_lg">
                        <ul class="nav navbar-nav navbar-center">
                            <li style="border-right:1px solid #cccccc;border-left:1px solid #cccccc;"><a href="/"> Home</a></li>
                            <li class="dropdown-full" style="border-right:1px solid #cccccc;">
                                <a data-toggle="dropdown" href="javascript:;" class="dropdown-toggle"> Self Serve or Raise a Request <span class="caret"></span></

在我的页面的主要内容中，我有一个链接 - 我希望这会触发下拉列表。

不幸的是我似乎无法做到这一点。我已经使用了各种切换选项并添加了show / hide类。

有什么建议吗？下面的代码不起作用（警报显示，但菜单不会扩展）。但是，如果我取出DELETE注释的行，那么它可以工作（菜单扩展）

<script>
    $(document).ready(function() {
        $("#ssrr").click(function() { // DELETE
            alert(1); // DELETE
            $('.dropdown-toggle').trigger("click"); //bootstrap 3.x by Richard
        }) // DELETE
    });
</script>

Answer 1

如果我理解你的问题，你想用JavaScript打开一个下拉列表，对吧？这可以通过trigger或addClass：

来完成

$(".trigger-method .dropdown-toggle").trigger("click");
$(".addclass-method").addClass("open");

Snippet 解释了这两种方法。

$(function () {
  setTimeout(function () {
    $(".trigger-method .dropdown-toggle").trigger("click");
    $(".addclass-method").addClass("open");
  }, 500);
});

.pull-left {width: 40%;}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="dropdown trigger-method pull-left">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
<div class="dropdown addclass-method pull-left">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Answer 2

<script>
    $(document).ready(function() {
        $("#ssrr").click(function(e) {
            e.stopPropagation();
            $('.dropdown-toggle').trigger("click"); //bootstrap 3.x by Richard
        })
    });
</script>

展开下拉列表

2 个答案: