javascript - 协助创建动态菜单弹出窗口-js

标签 javascript html css

我想做什么

好吧，我基本上希望类 js-op 的 div 弹出在我这边单击的每个图标下 bar .现在我所拥有的就是每当用户单击图标时都会弹出一个弹出窗口。

我想做什么

好的，所以我使用 for 循环遍历了所有图标，以便监视任何点击操作。我是 javascript 的新手，所以我认为这是一个巨大的成就!现在我有点卡住了，基本上现在我只想将在最后一行 (.css) 中找到的 .js-display 类添加到 js-op 类中，尊敬。意思是在每个图标下都有一个具有该类的 div。 (它设置为显示:无)当单击该图标时，它正下方的 div 将获得 .js-display 以便它变得可见。我本质上是在创建动态弹出菜单。

额外

我稍后再问

好吧，这个图标被点击了吗？显示面板，但用户决定单击另一个图标。是否可以让最先显示的第一个面板消失？

谢谢

再次感谢!

现在，如果我不认为这里有额外的东西，请告诉我，在否决投票之前(我听说堆栈可能有点苛刻)我不确定，我觉得它仍然与主要问题相关。

js

var pop_action = document.getElementById("js-uX-pop_up").getElementsByClassName("uX-nv-spn ");
var pop_panel = document.getElementsByClassName("js-op");

for(e_op = 0; e_op < pop_action.length; e_op++ ){   

    pop_action[e_op].addEventListener("click", activate_eop);

}

function activate_eop(){
alert("hello");
}

html 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="..\XSystem.css">

        <meta charset="utf-8" />
        <title>Xlaeo</title>
    </head>
    <body>
        <!-- section that holds mains -->
        <div class="xU-wper xU-flex-1-1">
            <!-- section holds two sends -->
            <section class="xU-flex uX-maon-wper">
                <!-- BEGIN LEFT: bar -->
                <section class="uX-maon-sc xU-white">
                    <div class="uX-fluid ">
                        <span class="uX-bar-modules-wper">
                            <!-- modules for side bar  -->
                            <!-- BEGIN Image company -->
                            <div class="uX-company-img">
                                <span>
                                <img src="http://icons.iconarchive.com/icons/icons-land/vista-hardware-devices/96/Motherboard-icon.png"/>
                                </span>
                            </div>
                            <!-- end image -->
                            <!-- BEGIN  side bar list-->
                            <div class="uX-list-modules uX-them-pd">
                                <span class="uX-side-nav " id="js-uX-pop_up" role="navigation">
                                    <li >

                                        <span class="uX-nv-spn">
                                            <a>
                                                    <i class="fab fa-d-and-d"></i>
                                            </a>

                                        </span>
                                        <!-- POPUP -->
                                        <div class="js-op"  style="display:none">

                                            <section>
                                                pop up
                                            </section>
                                        </div>
                                    </li>
                                    <li >
                                        <span class="uX-nv-spn">
                                        <i class="fab fa-mandalorian"></i>
                                        </span>
                                        <!-- POPUP -->
                                        <div class="js-op" style="display:none">
                                            <section>
                                                pop up2
                                            </section>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="uX-nv-spn">
                                        <i class="fab fa-snapchat-ghost"></i>
                                        </span>
                                        <!-- POPUP -->
                                        <div class="" style="display:none">
                                            <section>
                                                pop up
                                            </section>
                                        </div>
                                    </li>
                                    <li >
                                        <span class="uX-nv-spn  ">
                                        <i class="fas fa-handshake"></i>
                                        </span>
                                        <!-- POPUP -->
                                        <div class="" style="display:none">
                                            <section>
                                                pop up
                                            </section>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="uX-nv-spn">
                                        <i class="fab fa-java"></i>
                                        </span>
                                        <!-- POPUP -->
                                        <div class="uX_popU" style="display:none">
                                            <section>
                                                pop up
                                            </section>
                                        </div>
                                    </li>
                                </span>
                            </div>
                            <!-- end side bar list-->
                            <!-- profile image -->
                            <div class="">
                                <a>
                                    <span class="uX-items-center">
                                        <div class="uX_profile-img-wper">
                                            <img src="https://cdn.imaginetricks.com/wp-content/uploads/2017/08/Wonderful-Cute-Girls-Profile-Picture.jpg"/>
                                        </div>
                                        <span>Emma</span>
                                    </span>
                                </a>
                            </div>
                            <!-- end proifle image   -->
                        </span>
                    </div>
                </section>
                <!-- END LEFT: bar -->
                <!-- BEGIN RIGHT: bar -->
                <section class="uX-maon-sc uX-maon-sc2">
                    content
                </section>
                <!-- END RIGHT: bar -->
            </section>
        </div>
        <script type="text/javascript" src="../Js-script/mod-up.js"></script>
    </body>
</html>

CSS

.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li, html,
body, .uX-maon-sc, .uX-items-center, .uX-side-nav {
  display: flex;
  flex-flow: column; }

.xU-flex, .uX-side-nav {
  display: flex; }

.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li {
  flex: 1 1 auto; }

.uX-side-nav li {
  justify-content: center; }

.uX_profile-img-wper {
  border-radius: 100%;
  overflow: hidden; }

.xU-font, .uX-side-nav .uX-nv-spn {
  font-size: 1.4rem;
  color: #c62f09; }

.uX-side-nav .uX-nv-spn:hover {
  background: lightgray; }

.uX-side-nav .uX-nv-spn:hover {
  border-radius: 100%; }

.uX-side-nav .uX-nv-spn {
  height: 2.2rem;
  width: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center; }

body {
  background: #f4f4f4; }
  body li {
    list-style-type: none; }

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; }

.xU-white {
  background: white; }

img {
  width: 100%;
  height: 100%; }

.uX-maon-wper, .uX-maon-sc2 {
  flex: 1 1 auto; }

.uX_profile-img-wper {
  height: 4rem;
  width: 4rem; }

.uX-items-center {
  align-items: center; }

.uX-bar-modules-wper .uX-company-img {
  width: 4.5rem;
  border-bottom: 1px solid lightgray; }

.uX-bar-modules-wper .uX-list-modules {
  padding: 0.4rem; }

.uX-side-nav {
  align-items: center;
  flex: 1 1 auto; }
  .uX-side-nav li {
    height: 100%; }
  .uX-side-nav .uX-nv-spn {
    padding: 0.4rem;
    border-radius: 100%; }

.uX-list-modules {
  border-right: 1px solid #c62f09; }

.js-display {
  display: block; }

/*# sourceMappingURL=XSystem.css.map */

最佳答案

您的代码在所有元素上都缺少“js-op”类。此外，内联样式总是会覆盖 class/id 样式，因此您需要更改 

.js-display {display: block;}

到

.js-display {display: block !important;}

否则它不会工作。

你也没有在这里提供任何 JS，所以我只好弥补，但你明白了。应该这样做:

document.querySelectorAll('.uX-side-nav li').forEach((el)=>{
  el.addEventListener('click', (e)=>{
    document.querySelectorAll('.js-op').forEach((x)=>{x.classList.remove('js-display');});
    e.target.closest('li').querySelector('.js-op').classList.add('js-display');
  });                                                    
});
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li, html,
body, .uX-maon-sc, .uX-items-center, .uX-side-nav {
  display: flex;
  flex-flow: column; }

.xU-flex, .uX-side-nav {
  display: flex; }

.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li {
  flex: 1 1 auto; }

.uX-side-nav li {
  justify-content: center; }

.uX_profile-img-wper {
  border-radius: 100%;
  overflow: hidden; }

.xU-font, .uX-side-nav .uX-nv-spn {
  font-size: 1.4rem;
  color: #c62f09; }

.uX-side-nav .uX-nv-spn:hover {
  background: lightgray; }

.uX-side-nav .uX-nv-spn:hover {
  border-radius: 100%; }

.uX-side-nav .uX-nv-spn {
  height: 2.2rem;
  width: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center; }

body {
  background: #f4f4f4; }
  body li {
    list-style-type: none; }

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; }

.xU-white {
  background: white; }

img {
  width: 100%;
  height: 100%; }

.uX-maon-wper, .uX-maon-sc2 {
  flex: 1 1 auto; }

.uX_profile-img-wper {
  height: 4rem;
  width: 4rem; }

.uX-items-center {
  align-items: center; }

.uX-bar-modules-wper .uX-company-img {
  width: 4.5rem;
  border-bottom: 1px solid lightgray; }

.uX-bar-modules-wper .uX-list-modules {
  padding: 0.4rem; }

.uX-side-nav {
  align-items: center;
  flex: 1 1 auto; }
  .uX-side-nav li {
    height: 100%; }
  .uX-side-nav .uX-nv-spn {
    padding: 0.4rem;
    border-radius: 100%; }

.uX-list-modules {
  border-right: 1px solid #c62f09; }

.js-display {
  display: block !important; }

/*# sourceMappingURL=XSystem.css.map */
<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="..\XSystem.css">

        <meta charset="utf-8" />
        <title>Xlaeo</title>
    </head>
    <body>
        <!-- section that holds mains -->
        <div class="xU-wper xU-flex-1-1">
            <!-- section holds two sends -->
            <section class="xU-flex uX-maon-wper">
                <!-- BEGIN LEFT: bar -->
                <section class="uX-maon-sc xU-white">
                    <div class="uX-fluid ">
                        <span class="uX-bar-modules-wper">
                            <!-- modules for side bar  -->
                            <!-- BEGIN Image company -->
                            <div class="uX-company-img">
                                <span>
                                <img src="http://icons.iconarchive.com/icons/icons-land/vista-hardware-devices/96/Motherboard-icon.png"/>
                                </span>
                            </div>
                            <!-- end image -->
                            <!-- BEGIN  side bar list-->
                            <div class="uX-list-modules uX-them-pd">
                                <span class="uX-side-nav " id="js-uX-pop_up" role="navigation">
                                    <li>
  <span class="uX-nv-spn">
    <i class="fab fa-d-and-d"></i>
  </span>
  <div class="js-op"  style="display:none">
    <section>
      pop up1
    </section>
  </div>
</li>
<li>
  <span class="uX-nv-spn">
   
    <i class="fab fa-mandalorian"></i>
  </span>
  <div class="js-op" style="display:none">
    <section>
      pop up2
    </section>
  </div>
</li>
<li>
  <span class="uX-nv-spn">
    <i class="fab fa-snapchat-ghost"></i>
  </span>
  <div class="js-op" style="display:none">
    <section>
      pop up3
    </section>
  </div>
</li>
<li>
  <span class="uX-nv-spn  ">
    <i class="fas fa-handshake"></i>
  </span>
  <div class="js-op" style="display:none">
    <section>
      pop up4
    </section>
  </div>
</li>
<li>
  <span class="uX-nv-spn">
    <i class="fab fa-java"></i>
  </span>
  <div class="js-op" style="display:none">
    <section>
      pop up5
    </section>
  </div>
</li>
                                </span>
                            </div>
                            <!-- end side bar list-->
                            <!-- profile image -->
                            <div class="">
                                <a>
                                    <span class="uX-items-center">
                                        <div class="uX_profile-img-wper">
                                            <img src="https://cdn.imaginetricks.com/wp-content/uploads/2017/08/Wonderful-Cute-Girls-Profile-Picture.jpg"/>
                                        </div>
                                        <span>Emma</span>
                                    </span>
                                </a>
                            </div>
                            <!-- end proifle image   -->
                        </span>
                    </div>
                </section>
                <!-- END LEFT: bar -->
                <!-- BEGIN RIGHT: bar -->
                <section class="uX-maon-sc uX-maon-sc2">
                    content
                </section>
                <!-- END RIGHT: bar -->
            </section>
        </div>
        <script type="text/javascript" src="../Js-script/mod-up.js"></script>
    </body>
</html>

关于javascript - 协助创建动态菜单弹出窗口-js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50663112/

上一篇：javascript - 如何操作生成的 CSS

下一篇：html - 向右浮动不起作用

相关文章：

javascript - 基本 JQuery Slider - 如何删除底部的幻灯片编号？

javascript - AJAX 将 Span 字符串替换为外部日期字符串

HTML 输入字段右内边距

javascript - 自定义伪弹出窗口不显示背景

javascript - 删除 Google App 脚本中数组中的特定空项

javascript - 使用 jQuery 从这个 html 表单中获取文本区域的 ID

javascript - 动态添加文件到输入

Css3 webkit gradien 旧语法

css - ASP 样式无法正常工作

javascript - 如何访问通过swfobject的embedSWF嵌入的flash对象？

©2024 IT工具网  联系我们