javascript - Jquery:以编程方式触发大型下拉菜单上的点击事件

Question

我想在单击按钮时以编程方式触发大型下拉菜单上的单击事件。我尝试了以下但没有成功。

MEGA-DROPDOWN HTML 代码

<li class="nav-item dropdown mega-dropdown">
  <a class="nav-link dropdown-toggle waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true"
    aria-expanded="false">
    <i class="ti-layers-alt"></i>

    <div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>

  </a>
  <div class="dropdown-menu animated bounceInDown">
    <ul class="mega-dropdown-menu row">

      <li class="col-lg-12 col-md-12">

        <center>
          <h2>Message Subject</h2>
        </center>
        <center>
          <h4>Message Body</h4>
        </center>

      </li>

    </ul>
  </div>
</li>

<button type="button" onclick="showMegaDropDown()" >Show Mega Dropdown</button>

JavaScript 代码

showMegaDropDown(){
  $(".mega-dropdown").trigger('click');
  return;
}

Answer 1

在html中传递事件对象

<button type="button" onclick="showMegaDropDown(event)">Show Mega Dropdown</button>

修改脚本:

function showMegaDropDown(e) {
            e.stopPropagation();
            $('.dropdown-toggle').dropdown('toggle');
        }

cdn顺序:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>