Question

当我点击文字链接时，我试图让这个下拉列表触发。当我单击该链接时，它会将CORRECT元素ID dropdownMenuButton2写入控制台，但它实际上会触发dropdownMenuButton1。

＆＃13;

$('.dd').on('click', function (e) {
  e.stopPropagation();
  var id = $(this).attr('id');
  console.log('trying to trigger '+id);
  $('#'+id).dropdown('toggle');
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   
<button type="button" class="dd" id="dropdownMenuButton2">click me</button>
   
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <a class="dropdown-item" href="#">Action1</a>
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
    <a class="dropdown-item" href="#">Action2</a>
  </div>
</div>

＆＃13;

-

Answer 1

原因是

Local IIS

和下拉列表

<button type="button" class="dd" id="dropdownMenuButton2">click me</button>

有重复的ID。如果你在数据属性中存储“dropdownMenuButton2”，它将解决问题。

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

使用外部操作触发引导程序下拉列表

1 个答案: