Jquery：以编程方式触发大型下拉菜单上的点击事件答案

【问题标题】：Jquery: programmatically trigger click event on mega-dropdownJquery：以编程方式触发大型下拉菜单上的点击事件
【发布时间】：2019-12-24 08:43:27
【问题描述】：

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

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

【问题讨论】：

请检查控制台日志
也分享一下风格
jQuery 必须在 bootstrap js 之前出现

标签： javascript jquery

【解决方案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>

【讨论】：

请问我如何检查下拉菜单是否已经打开，所以我不切换它。我只想在它关闭时切换它。
if ($('.dropdown').find('.dropdown-menu').is(":hidden")) { $('.dropdown-toggle').dropdown('切换'); }

【解决方案2】：

在你的函数名前添加函数关键字

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

【讨论】：

【解决方案3】：

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

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

【讨论】：