Хотите держать Popover открытым даже когда вы выключаете его? - PullRequest
Новая
       33

Хотите держать Popover открытым даже когда вы выключаете его?

0 голосов
/ 19 марта 2019

У меня есть поповер с некоторыми настройками веб-страницы.Всплывающее окно запускается после того, как пользователь нажимает на элемент бокового меню.Текущая проблема - когда пользователь выключает его, всплывающее окно закрывается.Я хочу, чтобы всплывающее окно оставалось открытым, пока пользователь снова не щелкнет тот же элемент бокового меню.

$(document).ready(function() {
  $('#versionHistoryPicker').hide();
  $('#versionHistory').popover({
    content: $('#versionHistoryPicker'),
    placement: 'right',
    html: true
  });
  $('#versionHistory').popover('show');
  $('#versionHistory').popover('hide');
  $('#versionHistoryPicker').show();

  $('._content').mouseleave(function() {
    $('#versionHistory').popover('show');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<li class="treeview">
  <a href="#">
    <i class="fa fa-navicon"></i> <span>History Settings</span>
    <span class="pull-right-container">
             <i class="fa fa-angle-left pull-right"></i>
             </span>
  </a>
  <ul class="treeview-menu">
    <li>
      <a id="versionHistory">
        <i class="fa fa-circle-o"></i> <span>Version History</span>
        <span class="pull-right-container">
                   <i class="fa fa-angle-right pull-right"></i>
                   </span>
      </a>
    </li>
    <div class='_content' id='versionHistoryPicker' style='width:250px'>
      <div class="form-group">
        <label>Select Version:</label>
        <select class="form-control" id="versionDropdown" style="background-color:#ffffff; color:#777777">
          <option selected="selected" disabled="true"> Please Select Version </option>
        </select>
      </div>
      <button type="submit" class="btn btn-default btn-block" onclick="drawHistoryCharts()">Submit</button>
    </div>
  </ul>
</li>
...