Jquery-单击时实现下拉菜单

Question

我正在尝试在点击时实现下拉菜单..

到目前为止，我已经编写了以下代码：-

<div class="sub_nav_main_wrap">
    <div class="sub_nav_wrap">
        <div id="subnavabc" class="menuabc">
            <ul class="sub_navbc">
                <li>
                    <a id="subnavdiv1" href="#" class="sub_navbc_link" onclick="myFunction()">Recommendations (30)</a>
                    <ul class="submenu" id="secondDD1">
                      <li><a href="#">Menu item 1</a></li>
                      <li><a href="#">Menu item 2</a></li>
                      <li><a href="#">Menu item 3</a></li>
                      <li><a href="#">Menu item 4</a></li>
                    </ul>
                </li>

                <li>
                    <a id="subnavdiv2" href="#" class="sub_navbc_link" onclick="toggleColors()">Preferred (999+)</a>
                </li>
                <li>
                    <a href="#" class="sub_navbc_link">Discover (999+)</a>
                </li>
                <li>
                    <a href="#" class="sub_navbc_link">Broader Matches</a>
                </li>
                <li class="more_list">
                    <a href="#" class="sub_navbc_link">More<span class="sub_navbc_more"></span></a>
                    <div class="sub_navbc_more_list_wrap">
                        <div class="sub_navbc_more_list_arrow"></div>
                        <a href="#" class="sub_navbc_more_list">Reverse Matches</a>
                        <a href="#" class="sub_navbc_more_list">2 Way Matches</a>
                        <a href="#" class="sub_navbc_more_list">Shortlists</a>
                        <a href="#" class="sub_navbc_more_list">Viewed</a>
                    </div>
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

我想实现点击推荐，下拉菜单中应该有菜单项，例如..Menu1 等等..

我尝试通过以下 JavaScript 代码实现：-

function myFunction() {
                        document.getElementById("secondDD1").classList.add('show');
                }
                window.onclick = function(event) {
                  if (!event.target.matches('.sub_navbc_link')) {

                    var dropdowns = document.getElementsByClassName("submenu");
                    var i;
                    for (i = 0; i < dropdowns.length; i++) {
                      var openDropdown = dropdowns[i];
                      if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                      }
                    }
                  }
                }

这里的节目习惯了display:block，我一点击就知道了。

我的 CSS 看起来像这样：-

#topnavabc #wrap2 {
    height: auto;
}
.top_navbc_wrap{
    background: #ff5a60;
    font: normal 16px 'Roboto', sans-serif;
}
.top_navbc_inner_wrap{
    width: 1060px;
    margin: 0 auto;
    position: relative;
}
.top_nav_section{
    float: left;
    text-align: center;
}
.nav_main_logo, .top_navbc{
    display:inline-block;
}
.top_navbc li{
    float: left;
    position: relative;
    background: #ff5a60;
}
.top_navbc li a{
    display: block;
    text-decoration: none;
    color: #fdedee;
    padding: 18px 25px 16px;
    transition: color 0.2s ease 0s;
}
.top_navbc li a:hover{
    color: #fff;
    transition:transform 250ms ease 0s;
}
.nav_log_wrapper{
    padding: 13px 0 0;
    position:relative;
    width: 110px;
    margin: 0 auto;
}
.top_navbc_hbadge{
    position: absolute;
    background:url(http://img2.shaadi.com/assests/2016/images/badge-cap.png) no-repeat center top;
    width: 110px;
    height: 11px;
    margin: -11px 0 0;
}
.bg_img{
    display: inline-block;
    background: #fbfbfc;
    border: 1px solid #dddddf;
    border-top: none;
    height: 40px;
    margin: 10px auto 0;
    width: 66px;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.5);
    border-radius: 0 0 5px 5px;
    transition:height 0.5s ease-in-out;
    overflow: hidden;
}
.top_navbc_hbadge a{
    display: block;
    text-align: center;
    z-index: 900;
}
.top_navbc_hbadge:hover .bg_img{
    height: 90px;
}
.top_navbc_count{
    position: absolute;
    top:8px;
    left: 90px;
    z-index: 1;
    padding: 0 5px;
    margin: 0 0 0 -3px;
    border-radius:50px;
    background:#fff;
    color: #51505d;
    font: normal 12px 'Roboto', sans-serif;
}
.top_navbc_active{
    background: url(http://img2.shaadi.com/assests/2016/images/top-nav-arrow.png) no-repeat center bottom;
    color: #fff !important;
}
.nav_help_section{
    display: inline-block;
    height: 18px;
    padding: 26px 0 6px 10px
    position: relative;
    cursor: pointer;
}
.helpabc_wrap{
    float: right;
    width: 215px;
    margin: 9px 0 0;
    font-size: 16px;
}
#wrap2 .helpabc_wrap #login_section {
    float: left;
    margin: 0;
    height: 36px;
}
.top_navabc_pro_img{
    background: url(http://img2.shaadi.com/assests/2016/images/top-navabc-pro-help-icn.png) no-repeat right center;
    width: 53px;
    float: left;
}
.top_navbc_inner_wrap #login_section .thumb img{
    border: none;
}
#wrap2 .top_navbc_inner_wrap #login_section .thumb{
    width:32px;
    height: 32px;
    display: inline-block;
    margin: 2px 0 0 3px;
    border: 1px solid #e5e5e5;
}
.top_navabc_pro_upgrade, .top_navabc_pro_help{
    background: url(http://img2.shaadi.com/assests/2016/images/top-navabc-pro-help-icn.png) no-repeat right center;
    float: left;
    width: 75px;
    color: #fff;
    margin: 6px 0 0;
}
.top_navabc_pro_help{
    width: 48px;
}
.top_navabc_pro_upgrade:hover, .top_navabc_pro_help:hover{
    text-decoration: none;
}
.top_navabc_help_sept{
    border-right: 1px solid #ff7b80;
    float: left;
    width: 1px;
    height: 28px;
    margin: 5px 8px 0;
}
.sub_nav_main_wrap{
    font: normal 14px 'Roboto', sans-serif;
    text-align: center;
    background: #fff;
}
.sub_nav_wrap{
    width: 960px;
    margin: 0 auto;
}
.sub_navbc li{
    float: left;
    margin: 0 21px 0 0;
    position: relative;
}
a:active{
    background: none;
    }
    .sub_navbc li .sub_navbc_link, .sub_navbc_active{
    color: #72727d;
    display: block;
    position: relative;
    padding: 13px 8px 12px;
    transition: color 0.2s ease 0s;
    text-decoration: none !important;
    }
    .sub_navbc li .sub_navbc_link::after, .sub_navbc_active::after{
    background: #ff5a60;
    bottom: 0;
    content: "";
    display: block;
    height: 3px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transition: transform 250ms ease 0s;
    width: 0;
    }
    .sub_navbc li .sub_navbc_link:hover{
        text-decoration: none !important;
        color: #ff5a60 !important;
    }
    .sub_navbc_active{
    color: #ff5a60 !important;
    }
    .sub_navbc_active::after{
    width: 100%;
    transform: scaleX(1);
    }
/*
.sub_navbc li .sub_navbc_link, .sub_navbc_active{
    color: #72727d;
    display: block;
    position: relative;
    padding: 13px 8px 12px;

    text-decoration: none !important;
}
.sub_navbc li .sub_navbc_link::after, .sub_navbc_active::after{
    background: #ff5a60;
    bottom: 0;
    content: "";
    display: block;
    height: 3px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transition: transform 250ms ease 0s;
    width: 0;
}
.sub_navbc li .sub_navbc_link:hover{
    text-decoration: none !important;
    color: #ff5a60 !important;
    transition: color 0.2s ease 0s;
}
.sub_navbc_active{
    color: #ff5a60 !important;
}
.sub_navbc_active::after{
    width: 100%;
    transform: scaleX(1);
}

.sub_navbc li .sub_navbc_link, .sub_navbc_active{
    display: block;
    text-decoration: none;
    padding: 13px 8px 9px;
    color: #72727d;
    transition: color 0.2s ease 0s;
}
.sub_navbc li .sub_navbc_link:hover, .sub_navbc_active{
    text-decoration: none !important;
    color: #ff5a60 !important;
    transition:transform 250ms ease 0s;
}
.sub_navbc_active{
    border-bottom: 3px solid #ff5a60;
}
*/
.sub_navbc li.more_list{
    float: left;
    margin: 0;
    position: relative;
}
.sub_navbc li.more_list .sub_navbc_link{
    background: url(http://img2.shaadi.com/assests/2016/images/ico-dropdwn.png) no-repeat right 21px;
    padding: 13px 16px 12px 8px;
}
.sub_navbc li.more_list .sub_navbc_link:hover{
    background: url(http://img2.shaadi.com/assests/2016/images/ico-dropdwn-hvr.png) no-repeat right 21px;
    padding: 13px 16px 12px 8px;
}
.sub_navbc_more_list_wrap{
    background: #fff;
    box-shadow: 0 1px 12px rgba(43, 59, 93, 0.35);
    border-radius: 3px;
    width: 150px;
    font-size: 14px;
    position: absolute;
    left: 2px;
    top: 40px;
    text-align: left;
    z-index: 1;
}
.sub_navbc_more_list_arrow{
    background: url(http://img2.shaadi.com/assests/2016/images/top-nav-arrow.png) no-repeat left top;
    width: 14px;
    height: 7px;
    position: absolute;
    left: 43px;
    top: -7px;
}
.sub_navbc_more_list {
    display: block;
    padding: 10px 19px;
    color: #72727d;
}
.sub_navbc_more_list:hover{
    background: #f1f1f2;
    color: #72727d;
    text-decoration: none;
}

我做错了什么还是有解决方法..请帮助..我已经阅读了很多教程，但在这个问题上遇到了困难。

Answer 1

试试这个方法..

function myFunction(elem) {
  $(elem).next().toggle('slide');
}
$(window).click(function() {
  $('.submenu').slideUp();
});

$('.submenu, .sub_navbc_link').click(function(event) {
  event.stopPropagation();
});

#topnavabc #wrap2 {
  height: auto;
}
.top_navbc_wrap {
  background: #ff5a60;
  font: normal 16px'Roboto', sans-serif;
}
.top_navbc_inner_wrap {
  width: 1060px;
  margin: 0 auto;
  position: relative;
}
.top_nav_section {
  float: left;
  text-align: center;
}
.nav_main_logo,
.top_navbc {
  display: inline-block;
}
.top_navbc li {
  float: left;
  position: relative;
  background: #ff5a60;
}
.top_navbc li a {
  display: block;
  text-decoration: none;
  color: #fdedee;
  padding: 18px 25px 16px;
  transition: color 0.2s ease 0s;
}
.top_navbc li a:hover {
  color: #fff;
  transition: transform 250ms ease 0s;
}
.nav_log_wrapper {
  padding: 13px 0 0;
  position: relative;
  width: 110px;
  margin: 0 auto;
}
.top_navbc_hbadge {
  position: absolute;
  background: url(http://img2.shaadi.com/assests/2016/images/badge-cap.png) no-repeat center top;
  width: 110px;
  height: 11px;
  margin: -11px 0 0;
}
.bg_img {
  display: inline-block;
  background: #fbfbfc;
  border: 1px solid #dddddf;
  border-top: none;
  height: 40px;
  margin: 10px auto 0;
  width: 66px;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.5);
  border-radius: 0 0 5px 5px;
  transition: height 0.5s ease-in-out;
  overflow: hidden;
}
.top_navbc_hbadge a {
  display: block;
  text-align: center;
  z-index: 900;
}
.top_navbc_hbadge:hover .bg_img {
  height: 90px;
}
.top_navbc_count {
  position: absolute;
  top: 8px;
  left: 90px;
  z-index: 1;
  padding: 0 5px;
  margin: 0 0 0 -3px;
  border-radius: 50px;
  background: #fff;
  color: #51505d;
  font: normal 12px'Roboto', sans-serif;
}
.top_navbc_active {
  background: url(http://img2.shaadi.com/assests/2016/images/top-nav-arrow.png) no-repeat center bottom;
  color: #fff !important;
}
.nav_help_section {
  display: inline-block;
  height: 18px;
  padding: 26px 0 6px 10px position: relative;
  cursor: pointer;
}
.helpabc_wrap {
  float: right;
  width: 215px;
  margin: 9px 0 0;
  font-size: 16px;
}
#wrap2 .helpabc_wrap #login_section {
  float: left;
  margin: 0;
  height: 36px;
}
.top_navabc_pro_img {
  background: url(http://img2.shaadi.com/assests/2016/images/top-navabc-pro-help-icn.png) no-repeat right center;
  width: 53px;
  float: left;
}
.top_navbc_inner_wrap #login_section .thumb img {
  border: none;
}
#wrap2 .top_navbc_inner_wrap #login_section .thumb {
  width: 32px;
  height: 32px;
  display: inline-block;
  margin: 2px 0 0 3px;
  border: 1px solid #e5e5e5;
}
.top_navabc_pro_upgrade,
.top_navabc_pro_help {
  background: url(http://img2.shaadi.com/assests/2016/images/top-navabc-pro-help-icn.png) no-repeat right center;
  float: left;
  width: 75px;
  color: #fff;
  margin: 6px 0 0;
}
.top_navabc_pro_help {
  width: 48px;
}
.top_navabc_pro_upgrade:hover,
.top_navabc_pro_help:hover {
  text-decoration: none;
}
.top_navabc_help_sept {
  border-right: 1px solid #ff7b80;
  float: left;
  width: 1px;
  height: 28px;
  margin: 5px 8px 0;
}
.sub_nav_main_wrap {
  font: normal 14px'Roboto', sans-serif;
  text-align: center;
  background: #fff;
}
.sub_nav_wrap {
  width: 960px;
  margin: 0 auto;
}
.sub_navbc li {
  float: left;
  margin: 0 21px 0 0;
  position: relative;
}
a:active {
  background: none;
}
.sub_navbc li .sub_navbc_link,
.sub_navbc_active {
  color: #72727d;
  display: block;
  position: relative;
  padding: 13px 8px 12px;
  transition: color 0.2s ease 0s;
  text-decoration: none !important;
}
.sub_navbc li .sub_navbc_link::after,
.sub_navbc_active::after {
  background: #ff5a60;
  bottom: 0;
  content: "";
  display: block;
  height: 3px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transition: transform 250ms ease 0s;
  width: 0;
}
.sub_navbc li .sub_navbc_link:hover {
  text-decoration: none !important;
  color: #ff5a60 !important;
}
.sub_navbc_active {
  color: #ff5a60 !important;
}
.sub_navbc_active::after {
  width: 100%;
  transform: scaleX(1);
}
/*
.sub_navbc li .sub_navbc_link, .sub_navbc_active{
    color: #72727d;
    display: block;
    position: relative;
    padding: 13px 8px 12px;

    text-decoration: none !important;
}
.sub_navbc li .sub_navbc_link::after, .sub_navbc_active::after{
    background: #ff5a60;
    bottom: 0;
    content: "";
    display: block;
    height: 3px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transition: transform 250ms ease 0s;
    width: 0;
}
.sub_navbc li .sub_navbc_link:hover{
    text-decoration: none !important;
    color: #ff5a60 !important;
    transition: color 0.2s ease 0s;
}
.sub_navbc_active{
    color: #ff5a60 !important;
}
.sub_navbc_active::after{
    width: 100%;
    transform: scaleX(1);
}

.sub_navbc li .sub_navbc_link, .sub_navbc_active{
    display: block;
    text-decoration: none;
    padding: 13px 8px 9px;
    color: #72727d;
    transition: color 0.2s ease 0s;
}
.sub_navbc li .sub_navbc_link:hover, .sub_navbc_active{
    text-decoration: none !important;
    color: #ff5a60 !important;
    transition:transform 250ms ease 0s;
}
.sub_navbc_active{
    border-bottom: 3px solid #ff5a60;
}
*/

.sub_navbc li.more_list {
  float: left;
  margin: 0;
  position: relative;
}
.sub_navbc li.more_list .sub_navbc_link {
  background: url(http://img2.shaadi.com/assests/2016/images/ico-dropdwn.png) no-repeat right 21px;
  padding: 13px 16px 12px 8px;
}
.sub_navbc li.more_list .sub_navbc_link:hover {
  background: url(http://img2.shaadi.com/assests/2016/images/ico-dropdwn-hvr.png) no-repeat right 21px;
  padding: 13px 16px 12px 8px;
}
.sub_navbc_more_list_wrap {
  background: #fff;
  box-shadow: 0 1px 12px rgba(43, 59, 93, 0.35);
  border-radius: 3px;
  width: 150px;
  font-size: 14px;
  position: absolute;
  left: 2px;
  top: 40px;
  text-align: left;
  z-index: 1;
}
.sub_navbc_more_list_arrow {
  background: url(http://img2.shaadi.com/assests/2016/images/top-nav-arrow.png) no-repeat left top;
  width: 14px;
  height: 7px;
  position: absolute;
  left: 43px;
  top: -7px;
}
.sub_navbc_more_list {
  display: block;
  padding: 10px 19px;
  color: #72727d;
}
.sub_navbc_more_list:hover {
  background: #f1f1f2;
  color: #72727d;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub_nav_main_wrap">
  <div class="sub_nav_wrap">
    <div id="subnavabc" class="menuabc">
      <ul class="sub_navbc">
        <li>
          <a id="subnavdiv1" href="#" class="sub_navbc_link" onclick="myFunction(this)">Recommendations (30)</a>
          <ul class="submenu" id="secondDD1">
            <li><a href="#">Menu item 1</a>
            </li>
            <li><a href="#">Menu item 2</a>
            </li>
            <li><a href="#">Menu item 3</a>
            </li>
            <li><a href="#">Menu item 4</a>
            </li>
          </ul>
        </li>

        <li>
          <a id="subnavdiv2" href="#" class="sub_navbc_link" onclick="toggleColors()">Preferred (999+)</a>
        </li>
        <li>
          <a href="#" class="sub_navbc_link">Discover (999+)</a>
        </li>
        <li>
          <a href="#" class="sub_navbc_link">Broader Matches</a>
        </li>
        <li class="more_list">
          <a href="#" class="sub_navbc_link">More<span class="sub_navbc_more"></span></a>
          <div class="sub_navbc_more_list_wrap">
            <div class="sub_navbc_more_list_arrow"></div>
            <a href="#" class="sub_navbc_more_list">Reverse Matches</a>
            <a href="#" class="sub_navbc_more_list">2 Way Matches</a>
            <a href="#" class="sub_navbc_more_list">Shortlists</a>
            <a href="#" class="sub_navbc_more_list">Viewed</a>
          </div>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
  </div>
</div>