javascript - 隐藏下拉列表后，单击时再次显示它？

Question

我正在尝试解决下拉列表的问题。我想隐藏 mouseleave 上的下拉列表，但是当我再次单击该按钮以显示下拉列表时，它仍然是隐藏的。

$('ul.dropdown-menu').on('mouseleave', function(e) {
  $(this).hide();
 
});

$('.icm-link').on('click', function(event) {
  idP = $(this).val();
  shellID = $(this).attr('data-value');

  $('#' + idP).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-value='shellId' type="button" style='color: #2f84ff;height: 30px !important;width: 40px !important;' value='rowId' class="btn btn-default btn-xs dropdown-toggle icm-link" data-toggle="dropdown">
  <span class='glyphicon glyphicon-share-alt'  style='color: #2f84ff;' aria-hidden='true'></span>
</button>
<ul id='links' class="dropdown-menu links" style="position: absolute;">
  <li><a id='so' onclick='shellOverview()' href="#">Shell Overview</a></li>
  <li><a id='op' onclick='onePager()' href="#">One Pager</a></li>
  <li><a id='ds' onclick='decisionSheet()' href="#">Decision Sheet</a></li>
  <li><a id='sd' onclick='shellDecision()' href="#">Shell Decision</a></li>
  <li><a id='pm' onclick='partModel()' href="#">Partmodel</a></li>
  <li><a id='mt' onclick='milestoneTracking()' href="#">Milestone Tracking</a></li>
  <li><a id='ev' onclick='engineeringView()' href="#">Engineering View</a></li>
</ul>

Answer 1

$('.icm-link') 是一个按钮:

$('.icm-link').on('click', function(event) {
  idP = $(this).val(); 

将 .val 更改为 .attr('value')

$('.icm-link').on('click', function(event) {
  idP = $(this).attr('value');

$('ul.dropdown-menu').on('mouseleave', function(e) {
  $(this).hide();
});

$('.icm-link').on('click', function(event) {
  idP = $(this).attr('value'); 
  shellID = $(this).attr('data-value'); 

  $('#' + idP).toggle();
  $('#' + idP).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button data-value='1' type="button" style='color: #2f84ff;height: 30px !important;width: 40px !important;' value='1' class="btn btn-default btn-xs dropdown-toggle icm-link" data-toggle="dropdown">
                            <span class='glyphicon glyphicon-share-alt'  style='color: #2f84ff;' aria-hidden='true'></span>
                          </button>
                          <ul id='1' class="dropdown-menu links" style="position: absolute;">
                            <li><a id='so' onclick='shellOverview()' href="#">Shell Overview</a></li>
                            <li><a id='op' onclick='onePager()' href="#">One Pager</a></li>
                            <li><a id='ds' onclick='decisionSheet()' href="#">Decision Sheet</a></li>
                            <li><a id='sd' onclick='shellDecision()' href="#">Shell Decision</a></li>
                            <li><a id='pm' onclick='partModel()' href="#">Partmodel</a></li>
                            <li><a id='mt' onclick='milestoneTracking()' href="#">Milestone Tracking</a></li>
                            <li><a id='ev' onclick='engineeringView()' href="#">Engineering View</a></li>
                          </ul>