Javascript 从下拉框创建弹出窗口_Javascript

Javascript 从下拉框创建弹出窗口

javascript

Javascript 从下拉框创建弹出窗口,javascript,Javascript,我希望能够打开一个下拉菜单，当我选择其中一个选项时，一个小窗口将弹出更多可用选项。在这张照片中我发现了一些东西：我在谷歌上搜索过，但找不到任何接近解决方案的东西。我可以创建一个下拉列表，其中包含指向其他页面的链接，但这不是我想要的我也愿意改变语言或使用外部库（如JQuery）来实现这一点我想发布我的代码，但它实际上只是w3schools的下拉教程，有一些改动。简短回答：如果使用默认的控件，则无法执行此操作OnClickListeners无法附加到元素备份答案：您可以创建一个自定义下拉

我希望能够打开一个下拉菜单，当我选择其中一个选项时，一个小窗口将弹出更多可用选项。在这张照片中我发现了一些东西：

我在谷歌上搜索过，但找不到任何接近解决方案的东西。我可以创建一个下拉列表，其中包含指向其他页面的链接，但这不是我想要的

我也愿意改变语言或使用外部库（如JQuery）来实现这一点

我想发布我的代码，但它实际上只是w3schools的下拉教程，有一些改动。

简短回答：

如果使用默认的

控件，则无法执行此操作

OnClickListeners

无法附加到

元素

备份答案：

您可以创建一个自定义下拉列表，基本上创建和设置您自己的html元素的样式，当您单击它时，显示一个项目列表，即带有一些选项的

元素，并将onClickListeners附加到这些元素以显示您的警报。

1。创建一个模态-在HTML文档中，使用

显示：隐藏

创建一个模态

2。侦听点击次数-在javascript中添加一个事件侦听器，用于侦听链接上的任何点击次数

3。显示模态-当有人单击您的链接时，将模态的显示更改为

block

var link = document.getElementById('your-link');
var modal = document.getElementById('your-modal');

link.addEventListener("click", function(){
   modal.style.display = 'block';
});

长答覆：下面是一些示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
<style>
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
    margin-bottom: -250px;
}



/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <div class="popup" onclick="myFunction()">popup1
      <span class="popuptext" id="myPopup1">A Simple Popup1!</span>
    </div><br><br>
    <div class="popup" onclick="myFunction()">popup2
      <span class="popuptext" id="myPopup2">A Simple Popup2!</span>
    </div><br><br>
    <div class="popup" onclick="myFunction()">popup3
      <span class="popuptext" id="myPopup3">A Simple Popup3!</span>
    </div>
  </div>
</div>



<script>
// When the user clicks on div, open the popup
function myFunction() {
    var popup = document.getElementById("myPopup2"); //you can easily switch this with JS
    popup.classList.toggle("show");
}
</script>

</body>
</html>


.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}
/*弹出式容器-可以是任何你想要的*/
.弹出窗口{
位置：相对位置；
显示：内联块；
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
/*实际弹出窗口*/
.popup.popuptext{
可见性：隐藏；
宽度：160px；
背景色：#555；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：8px0；
位置：绝对位置；
z指数：1；
底部：125%；
左：50%；
左边距：-80px；
边缘底部：-250px；
}
/*切换此类-隐藏并显示弹出窗口*/
.popup.show{
能见度：可见；
-网络工具包动画：Fadein1s；
动画：Fadein1s；
}
/*添加动画（在弹出窗口中淡入淡出）*/
@-webkit关键帧fadeIn{
从{opacity:0；}
到{opacity:1；}
}
@关键帧淡入淡出{
从{opacity:0；}
到{opacity:1；}
}
悬停式下拉菜单
将鼠标移到按钮上可打开下拉菜单
下拉列表
弹出窗口1
一个简单的弹出窗口1！



弹出窗口2
一个简单的弹出窗口2！



弹出窗口3
一个简单的弹出窗口3！
//当用户单击div时，打开弹出窗口
函数myFunction（）{
var popup=document.getElementById（“myPopup2”）；//您可以很容易地用JS切换它
popup.classList.toggle（“显示”）；
}

这个例子使用了

popup.classList.toggle（“show”）以显示或隐藏弹出窗口。你应该了解学校的下拉列表
希望这有帮助
 这些变化可能是相关的。给我们看看代码