有助于创建动态菜单弹出窗口-js

时间：2018-06-03 03:47:11

标签： javascript html css

我正在尝试做什么

好吧所以我基本上希望在 js-op 类的div下面点击我旁边的每个图标bar。现在我所拥有的只是当用户点击图标弹出弹出窗口时。

我正在尝试做什么

好的，所以我使用for循环运行所有图标，以便查看任何单击的操作。我是javascript的新手，所以我认为这是一个巨大的成就！现在我有点卡住了，基本上现在我只想让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 */

1 个答案:

答案 0 :(得分：1)

您的代码遗失了＆＃39; js-op＆＃39;关于所有元素的类。此外，内联样式始终覆盖类/ id样式，因此您需要更改

.js-display {display: block;}

到

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

或者它不会工作。

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

＆＃13;
＆＃13; 
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');
  });                                                    
});
＆＃13; 
.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 */
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题