bootstrap中下拉菜单(dropdown)的问题

通过行间触发事件：

<div class="container">
    <div class="row mt-5">
        <div class="col-5">
            <div class="dropdown" id="myDrop" data-toggle="dropdown">
                <button class="btn btn-dark text-light">中国一线城市</button>
                <div class="dropdown-menu" id="myMenu">
                    <a href="" class="dropdown-item">北京</a>
                    <a href="" class="dropdown-item">上海</a>
                    <a href="" class="dropdown-item">广州</a>
                    <div class="dropdown-divider"></div>
                    <a href="" class="dropdown-item">深圳</a>
                </div>
            </div>
        </div>
    </div>
</div>

dropdown.gif

通过jQuery触发事件：

<div class="container">
    <div class="row mt-5">
        <div class="col-5">
            <div class="dropdown" id="myDrop">
                <button class="btn btn-dark text-light">中国一线城市</button>
                <div class="dropdown-menu" id="myMenu">
                    <a href="" class="dropdown-item">北京</a>
                    <a href="" class="dropdown-item">上海</a>
                    <a href="" class="dropdown-item">广州</a>
                    <div class="dropdown-divider"></div>
                    <a href="" class="dropdown-item">深圳</a>
                </div>
            </div>
        </div>
    </div>
</div>

    $('.dropdown')
    .find('.btn')
    .on('click', function () {
        $('#myMenu').dropdown('toggle');
    });

当使用方法去触发时，其中dropdown('toggle')和想象中的不一样，只能触发显示，不能隐藏，并且位置还有所偏移。。

drop.gif

所以，我用了jQuery方法中的 toggle();
也能正常。。

$('.dropdown')
    .find('.btn')
    .on('click', function () {
        $('#myMenu').toggle();
    });

但是，dropdown身上的一些事件用不了。。
比如：

$('#myDrop').on('show.bs.dropdown', function () {
    console.log('showing!');
})