javascript - CSS 和 javascript

Question

我想在表单组 div 的 ul 列表中添加“输入”。 但是，每次我点击文本区域时，下拉菜单都会向上移动。我想在点击输入时保留下拉菜单。

<div class="form-group">
      <a class="btn btn-default btn-select">
            <input class="btn-select-input" id="" name="" value="Option 2" type="hidden">
            <span class="btn-select-value">Purpose of Enquiry</span>
            <span class="btn-select-arrow glyphicon glyphicon-triangle-bottom"></span>
            <ul style="display: none;">
                <li>Career Enquiries</li>
                <li>Data Protection Feedback</li>
                <li>Media & Publications</li>
                <li>New Business Collaborations<input class="dropinput" type="text" placeholder="Please specify project location"></li>
                <li>Others<input class="dropinput" type="text" placeholder="Please specify"></li>
            </ul>
        </a>
        </div>

Answer 1

<input> is an invalid child for <li> .

话虽如此，您可能不是在寻找 <ul>和 <li>元素完全。您正在尝试向用户展示一个选择，因此，您希望利用 <select> 和 <option> 元素。

您希望第一个输入在用户选择元素时显示，第二个输入在用户选择 Others 时显示.为此，设置 display两个元素的 none默认情况下。然后根据选择显示目标元素，同时使用jQuery隐藏其他元素:

var selection = document.getElementsByTagName('select')[0];
selection.onchange = function() {
  if (selection.value == 'Others') {
    $('#specify').show();
    $('#project').hide();
  }
  else {
    $('#project').show();
    $('#specify').hide();
  }
}

#specify {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
  <span class="btn-select-value">Purpose of Enquiry</span>
  <select>
      <option>Career Enquiries</option>
      <option>Data Protection Feedback</option>
      <option>Media & Publications</option>
      <option>New Business Collaborations</option>
      <option>Others</option>
    </select>
  <input id="project" class="dropinput" type="text" placeholder="Please specify project location">
  <input id="specify" class="dropinput" type="text" placeholder="Please specify">
</div>

希望对您有所帮助! :)