个人中心
gpt4 book ai didi

javascript - 单击关闭/隐藏子菜单

转载 作者：行者123 更新时间：2023-11-29 15:07:32 27 4
gpt4 key购买 nike

我一直在试验一个特定的网站，一切看起来都完全符合我的要求。我有一个有选择的下拉菜单。然后我有一个点击打开的子菜单。我需要将子菜单放在它所做的下拉菜单之上。然后，我需要在单击“返回菜单”链接所在的位置关闭子菜单，但保持下拉菜单打开。

我已经到了这样的地步，“返回菜单”链接不会关闭整个下拉菜单，但它在以前什么都不做，每次我点击它时它都会关闭整个下拉菜单。

另一个问题是，当我单击子菜单中的其他链接之一时，它通过关闭下拉菜单正常工作，但当单击下拉按钮时，它不会刷新并继续显示子菜单。

不确定这是否可以完成，我是 JS 的新手，我已经尝试了很多 JS 设置。当前的 JS 可能不正确，所以请忽略它，或者如果我必须稍微调整它。我创建了一个 fiddle 来向您展示我的意思，如果无法完成，我很感激您花时间和精力帮助我。

这是我的代码。

HTML

    window.onload=function(){
      
//Dropdown Start
$(document).ready(function() {
  $('.dropdown-menu a.dropdown-list').on("click", function(e) {
    $(this).parent().parent().find('.dropdown-list').show();
    $(this).next('li').toggle();
    e.stopPropagation();
  });
});
// Dropdown End


    }
     /* Body Start */
body {
  background-color: #b3d1ff ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* Body End */

/* ============================================================================ */

/* Navbar Start */
.nav-text {
  color: #000 !important;
  font-size: 14px;
  margin-bottom: 5px;
}

.navbar {
  background: rgba (153, 153, 153, 0.5);
  position: fixed;
  height: 45px;
  bottom: 0;
  left: 0;
  width: 100% !important;
}

.navbar .right-text {
  float: right;
  margin: 0;
  margin-right: 10px;
}

/* Navbar End */

/* ============================================================================ */
button:focus {
  outline: none !important;
}


.button {
  background: transparent !important;
  background-color: transparent !important;
  border: none;
}

.dropup {
  left: 0 !important;
}

.dropdown-menu.columns-2 {
  min-width: 600px;
}

.dropdown-menu.columns-3 {
  min-width: 600px;
}

.dropdown-menu li a {
  padding: 5px 15px;
  font-weight: 300;
}



.3-column-drop {
  list-style: none !important;
}

.3-column-drop li a {
  display: inline-block;
  clear: both;
  line-height: 1.428571429;
  color: #333;
  white-space: normal;
}

ul {
  list-style-type: none;
}

/* Dropside Start */

.dropside-submenu {
  position: relative;
}

.dropside-submenu .dropdown-menu {
  width: 740px !important;
  height: 340px !important;
  top: 0;
  left: -548px !important;
 
  background-color: #d9d9d9;
}

/* Dropside End */



/* Dropup End */
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

      <script type="text/javascript" src="https://www.denlyncomputers.com.au/test/jquery-3.3.1.js"></script>
      <script type="text/javascript" src="https://www.denlyncomputers.com.au/test/bootstrap.js"></script>
      <link rel="stylesheet" type="text/css" href="https://www.denlyncomputers.com.au/test/bootstrap.css">
      <link rel="stylesheet" type="text/css" href="https://www.denlyncomputers.com.au/test/styles.css">
      <script type="text/javascript" src="https://www.denlyncomputers.com.au/test/custom.js"></script>

  <style id="compiled-css" type="text/css">

/* Dropup Start */
.dropdown-menu {
  width: 740px !important;
  height: 350px !important;
  margin-bottom: 7px !important;
  margin-left: 1px !important;
  background-color: #d9d9d9;
}
  </style>
</head>
<body>
    

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Navbar Start -->
<div class="os">
  <div class="navbar">

    <!-- Menu Start -->
    <div class="dropup show">
      <button class="" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <img src="https://www.denlyncomputers.com.au/test/start-here.png" width="30" height="30" title="">
      </button>





      <div class="dropdown-menu multi-column columns-3 show" aria-labelledby="dropdownMenuButton">
        <div class="col-12">
          <div class="row">

            <div class="col-4">
              <ul class="3-column-drop">
                <li>
                  <h5>Section1</h5>
                </li>

                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>

              </ul>
            </div>

            <div class="col-4">
              <ul class="3-column-drop">
                <li>
                  <h5>Section2</h5>
                </li>

                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>

              </ul>
            </div>

            <div class="col-4">
              <ul class="3-column-drop">

                <!-- ====================================== -->
                <!-- Start of Dropside Issue -->
                <!-- ====================================== -->

                <div class="dropside-submenu">
                  <a class="dropdown-item dropdown-list" href="#">
                    <h5> Go To Submenu
                      <img src="https://www.denlyncomputers.com.au/test/arrow.png" width="10" height="11"></h5>
                  </a>

                  <ul class="dropdown-menu">

                    <li><a class="dropdown-item dropdown-list">
                        <h5> Return to Menu
                          <img src="https://www.denlyncomputers.com.au/test/arrow.png" width="10" height="11"></h5>
                      </a>
                    </li>

                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>

                  </ul>
                </div>

                <!-- ====================================== -->
                <!-- End of Dropside Issue -->
                <!-- ====================================== -->

                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
              </ul>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- Menu End -->
<!-- Navbar End -->

</body></html>

https://jsfiddle.net/Denlyn/9hbLgd80/

最佳答案

欢迎使用 stackoverflow @Denlyn。

我对您的代码添加了一些最小的更改。认为它应该工作。 

    window.onload=function(){
      
//Dropdown Start
$(document).ready(function() {
  $('.dropdown-menu a.dropdown-list').on("click", function(e) {
    $(this).parent().parent().find('.dropdown-list').show();
    $(this).next('li').toggle();
    e.stopPropagation();
  });

  $('.return-link').on('click', function() {
    $('.submmenu').hide();
  });

$('.go-to-submenu').on('click', function() {
    $('.submmenu').show();
});
});
// Dropdown End


    }
     /* Body Start */
body {
  background-color: #b3d1ff ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* Body End */

/* ============================================================================ */

/* Navbar Start */
.nav-text {
  color: #000 !important;
  font-size: 14px;
  margin-bottom: 5px;
}

.navbar {
  background: rgba (153, 153, 153, 0.5);
  position: fixed;
  height: 45px;
  bottom: 0;
  left: 0;
  width: 100% !important;
}

.navbar .right-text {
  float: right;
  margin: 0;
  margin-right: 10px;
}

/* Navbar End */

/* ============================================================================ */
button:focus {
  outline: none !important;
}


.button {
  background: transparent !important;
  background-color: transparent !important;
  border: none;
}

.dropup {
  left: 0 !important;
}

.dropdown-menu.columns-2 {
  min-width: 600px;
}

.dropdown-menu.columns-3 {
  min-width: 600px;
}

.dropdown-menu li a {
  padding: 5px 15px;
  font-weight: 300;
}



.3-column-drop {
  list-style: none !important;
}

.3-column-drop li a {
  display: inline-block;
  clear: both;
  line-height: 1.428571429;
  color: #333;
  white-space: normal;
}

ul {
  list-style-type: none;
}

/* Dropside Start */

.dropside-submenu {
  position: relative;
}

.dropside-submenu .dropdown-menu {
  width: 740px !important;
  height: 340px !important;
  top: 0;
  left: -548px !important;
 
  background-color: #d9d9d9;
}

/* Dropside End */



/* Dropup End */
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

      <script type="text/javascript" src="https://www.denlyncomputers.com.au/test/jquery-3.3.1.js"></script>
      <script type="text/javascript" src="https://www.denlyncomputers.com.au/test/bootstrap.js"></script>
      <link rel="stylesheet" type="text/css" href="https://www.denlyncomputers.com.au/test/bootstrap.css">
      <link rel="stylesheet" type="text/css" href="https://www.denlyncomputers.com.au/test/styles.css">
      <script type="text/javascript" src="https://www.denlyncomputers.com.au/test/custom.js"></script>

  <style id="compiled-css" type="text/css">

/* Dropup Start */
.dropdown-menu {
  width: 740px !important;
  height: 350px !important;
  margin-bottom: 7px !important;
  margin-left: 1px !important;
  background-color: #d9d9d9;
}
  </style>
</head>
<body>
    

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Navbar Start -->
<div class="os">
  <div class="navbar">

    <!-- Menu Start -->
    <div class="dropup show">
      <button class="" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <img src="https://www.denlyncomputers.com.au/test/start-here.png" width="30" height="30" title="">
      </button>





      <div class="dropdown-menu multi-column columns-3 show" aria-labelledby="dropdownMenuButton">
        <div class="col-12">
          <div class="row">

            <div class="col-4">
              <ul class="3-column-drop">
                <li>
                  <h5>Section1</h5>
                </li>

                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>

              </ul>
            </div>

            <div class="col-4">
              <ul class="3-column-drop">
                <li>
                  <h5>Section2</h5>
                </li>

                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>

              </ul>
            </div>

            <div class="col-4">
              <ul class="3-column-drop">

                <!-- ====================================== -->
                <!-- Start of Dropside Issue -->
                <!-- ====================================== -->

                <div class="dropside-submenu">
                  <a class="dropdown-item dropdown-list go-to-submenu" href="#">
                    <h5> Go To Submenu
                      <img src="https://www.denlyncomputers.com.au/test/arrow.png" width="10" height="11"></h5>
                  </a>

                  <ul class="dropdown-menu submmenu">

                    <li><a class="dropdown-item dropdown-list return-link">
                        <h5> Return to Menu
                          <img src="https://www.denlyncomputers.com.au/test/arrow.png" width="10" height="11"></h5>
                      </a>
                    </li>

                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>

                  </ul>
                </div>

                <!-- ====================================== -->
                <!-- End of Dropside Issue -->
                <!-- ====================================== -->

                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
              </ul>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- Menu End -->
<!-- Navbar End -->

</body></html>

关于javascript - 单击关闭/隐藏子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58443216/

27 4 0
文章推荐： android - Android在WebView请求上加上X-Requested-With有什么好处？
文章推荐： php - 谷歌可视化 API + SQL
文章推荐： Android CTS 错误 : E/TestInvocation: Unexpected contents in directory/tmp/android-cts-media
文章推荐： android - 使用 Firebase 设置群聊的阅读状态
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com