嵌入式JavaScript代码没有响应

Question

我有下拉文本框表单并打开下拉按钮没有任何反应。下面是我的代码，我正在研究Angular 4框架：

$('#demo-combo-box-2').click(function(event) {
  event.preventDefault();
  $(event.currentTarget).parents('.input-group').siblings('.combo-box-scroll').toggleClass('hidden');
});

.hidden { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<form role="form" class="form-inline">
  <div class="form-group">
    <div class="combo-box">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Combobox">
        <div class="input-group-btn">
          <button class="btn btn-primary btn-icon" type="button" id="demo-combo-box-2">
                    <i class="fa fa-chevron-down"></i>
                  </button>
        </div>
      </div>
      <div class="combo-box-scroll hidden">
        <div class="list-group">
          <a class="list-group-item">Item 1</a>
          <a class="list-group-item">Item 2</a>
          <a class="list-group-item">Item 3</a>
          <a class="list-group-item">Item 4</a>
          <a class="list-group-item">Item 5</a>
        </div>
      </div>
    </div>
  </div>
</form>