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>

Answer 2

在函数名前添加 function 关键字

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

Answer 3

我强烈怀疑li标签不是你想要点击的。 尝试点击a标签...

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