从下拉列表中选择一个列表项以打开模式？我应该使用 jquery/js 吗？

Question

我正在尝试创建一个包含一些列表项的下拉列表，当用户选择某个“时间”（例如“稍后”）时，会触发稍后打开的模式。 （原始代码是选择/选项，但我有 javascript 将其转换为 ul/li 以进行样式设置。）

这是列表项代码。

<ul class="select-options" style="display: none;">
   <li value="asap">Delivery ASAP</li>
   <li value="later">Delivery Later</li>
   <li value="catering">Catering</li>
</ul>

这是模态代码。

    <div class="later-modal">
        <p>Select a time to deliver.</p>
    </div>

<div class="catering-modal">
        <p>Select a time to cater.</p>
    </div>

我应该使用 if/else 语句来打开模式吗？我现在不确定该怎么做。我也没有使用任何类型的引导程序。

任何帮助将不胜感激，谢谢！

Answer 1

我将下拉菜单转换为真正的下拉菜单（选择元素）。

解决办法如下：

$('li').click(function(){
  $('.modal').hide();
  $('.' + $(this).attr('data-value') + '-modal').show();
  $('#dropdown').removeAttr('checked');
});

label {
  cursor:pointer;
  border:1px solid silver;
  border-radius:5px;
  padding:2px;
}

ul {
  list-style:none;
  padding:2px;
  margin:0;
  border:1px solid silver;
  border-radius:5px;
  position:absolute;
}

li {
  margin:0;  
  cursor:pointer;
}

#dropdown {
  display:none;
}

.select-options {
  opacity:0;
  transition:all .2s ease;
}

#dropdown:checked + .select-options {
  opacity:1;  
}

.modal {
  display:none;
  background:rgba(0,0,0,0.8);
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:#000;
  color:#fff;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="dropdown">Choose time</label>
<input type="checkbox" id="dropdown" />

<ul class="select-options">
   <li data-value="asap">Delivery ASAP</li>
   <li data-value="later">Delivery Later</li>
   <li data-value="catering">Catering</li>
</ul>

<div class="modal later-modal">
  <p>Select a time to deliver.</p>
</div>

<div class="modal catering-modal">
  <p>Select a time to cater.</p>
</div>

Answer 2

在我复制坏代码块之前我很抱歉...试试这个

$(document).ready(function() {
  $("#later").click(function() {
    $(".later-modal").toggle();
  });
  
  $("#catering").click(function() {
  $(".catering-modal").toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="select-options" style="display: block;">
  <li value="asap">Delivery ASAP</li>
  <li id="later" value="later">Delivery Later</li>
  <li id="catering" value="catering">Catering</li>
</ul>

<div class="later-modal" style="display: none;">
  <p>Select a time to deliver.</p>
</div>

<div class="catering-modal" style="display: none;">
  <p>Select a time to cater.</p>
</div>