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

Select a list item from dropdown to open modal? Should I use jquery/js?

本文关键字：我应该 模式 js jquery 选择 下拉菜单 列表 一个      更新时间：2023-09-26

我正在尝试创建一个下拉列表项目，当用户选择一个特定的"时间"，例如"稍后"，触发稍后模式打开。(原始代码是select/option，但我有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语句来打开一个模态吗?我不知道现在该怎么做。我也没有使用任何类型的引导。

任何帮助都将是感激的，谢谢!

我把下拉菜单变成了一个真正的下拉菜单(select element)

解决方案如下:

$('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>

我很抱歉之前我已经复制坏的代码块…试试这个

$(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>

相关文章：