javascript - 移动菜单帮助，将父链接添加到下拉列表，禁用父链接

我已经搜索了一段时间来寻找一种方法来完成我想要完成的事情，但没有找到任何可以帮助我或解释得足够好让我理解的方法。我有这个 jsfiddle我正在努力。我在让它按照我想要的方式工作时遇到了一些问题。我想将父链接克隆到下拉区域并确保禁用父链接(仅在移动设备上)并且仅在单击时显示下拉列表。我知道这可能可以通过使用 JS 来完成，因为我无法编辑我正在使用的 CMS 输出的 HTML。对不起，我不太热衷于 JS，仍然学习。如果您需要更多信息，请告诉我。非常感谢!

HTML

    <div class="main-nav">
    <ul id="megaMenu" class="menuContainer nav">
    <li class="menuItem"><a class="menuLink" href="resources"><span class="menuText">Resources</span></a>
            <div class="content">
                <div class="subnav" id="drop-resources">
                    <img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
                    <div class="left">
                        <ul>
                            <li><a href="/resources/resource-library">Resource Library</a>
                            </li>
                            <li><a href="/resources/legal-resources">Legal Resources</a>
                            </li>
                            <li><a href="/ask-the-experts/search-answers">Ask the Experts</a>
                            </li>
                            <li><a href="/resources/community">Community</a>
                            </li>
                            <li><a href="/resources/find-storage">Find Storage</a>
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                        <ul>
                            <li><a href="/resources/industry-buyers-guide">Buyer's Guide</a>
                            </li>
                            <li><a href="/resources/upcoming-auctions">Upcoming Auctions</a>
                            </li>
                            <li><a href="/resources/tssa-forms-software">Forms Software</a>
                            </li>
                            <li><a href="/resources/news/self-storage-news-magazine">Self Storage News Magazine</a>
                            </li>
                            <a href="/resources/community/open-for-business-blog">
                                <li>Blog</li>
                            </a>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="menuItem activeItem"><a class="menuLink" href="education"><span class="menuText">Education</span></a>
            <div class="content">
                <div class="subnav" id="drop-education">
                    <img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
                    <div class="left">
                        <ul>
                            <li><a href="/education/conference-trade-show/conference-and-trade-show-2015/general-info">Annual Conference</a>
                            </li>
                            <li><a href="/education/executive-retreat-2015/home">Executive Retreat</a>
                            </li>
                            <li><a href="/education/luncheon-calendar">Luncheons</a>
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                        <ul>
                            <li><a href="/education/tssa-webinars">Webinars</a>
                            </li>
                            <li><a href="/education/tssa-podcasts">Podcasts</a>
                            </li>
                            <li><a target="_blank" href="/photos/txssa/sets/">Luncheon Photos</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="menuItem calendarnav"><a class="menuLink" href="calendar"><span class="menuText">Calendar</span></a>
            <div class="content">
                <div class="subnav" id="drop-calendar">
                    <img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
                    <div class="left">
                        <ul id="calendarOptions">
                            <li><a href="/calendar">All Calendar Items</a>
                            </li>
                            <li><a href="66554bfc-9970-6e48-8fd4-ff0000ccdd76">Luncheon Calendar</a>
                            </li>
                            <li><a href="9d574bfc-9970-6e48-8fd4-ff0000ccdd76">Deadline Calendar</a>
                            </li>
                            <li><a href="71594bfc-9970-6e48-8fd4-ff0000ccdd76">Education Calendar</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="menuItem membership"><a class="menuLink" href="membership"><span class="menuText">Membership</span></a>
            <div class="content">
                <div class="subnav" id="drop-membership">
                    <img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
                    <div class="left">
                        <ul>
                            <li><a href="/membership/member-benefits" originalpath="/membership/member-benefits" originalattribute="href">Membership Benefits</a>
                            </li>
                            <li><a href="/membership/join-tssa">Join REDACTED</a>
                            </li>
                            <li><a href="/membership/pay-my-dues">Pay My Dues</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="menuItem aboutus"><a class="menuLink" href="about-us"><span class="menuText">About Us</span></a>
            <div class="content">
                <div class="subnav" id="drop-about">
                    <img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
                    <div class="left">
                        <ul>
                            <li><a href="/about-us/contact-us">Contact Us</a>
                            </li>
                            <li><a href="/about-us/board">Board</a>
                            </li>
                            <li><a href="/about-us/boardnominations">Board Nominations</a>
                            </li>
                            <li><a href="/about-us/committees">Committees</a>
                            </li>
                            <li><a href="/about-us/faqs">FAQs</a>
                            </li>
                            <li><a href="/about-us/charitable-fundraising">Charitable Fundraising</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="menuItem membersonly"><a class="menuLink" href="members-only"><span class="menuText">Members Only</span></a>
            <div class="content">
                <div id="drop-members" class="subnav">
                    <img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
                    <div class="left">
                        <ul>
                            <li><a href="/members-only/my-account">My Account</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

CSS

body{
    background:#112B50;
}

ul{
    list-style:none;
}

.main-nav {
  clear: both;
  margin-top: 20px;
  float: left;
  width: 100%;
}

#megaMenu {
  float: right;
  padding-top: 15px;
  position:absolute;
}

.menuItem {
  float: left;
  position: relative;
}

.menuLink {
  display: block;
  color: #fff;
  font-size: 15px;
  background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right 5px;
  text-decoration: none;
  padding-right: 15px;
  margin-right: 22px;
}


.calendarnav .menuLink {
  background: none;
  padding: 0;
}

.membersonly .menuLink {
  margin: 0;
  color: #FC0;
}

.menuItem .content {
  display: none;
  position: absolute;
  top: 15px;
  padding-top: 20px;
  left: 0;
  float: left;
  max-width: 344px;
  z-index: 10;
}

.membership .content, .aboutus .content, .membersonly .content {
  width: 200px;
}

.menuItem:nth-of-type(5) .content {
  left: -118px;
}

.menuItem:nth-of-type(6) .content {
  left: -82px;
}

.menuItem:hover .content, 
.menuItem:active .content,
.menuItem:focus .content {
  display: block;
}

.calendarnav:hover .content {
  display: none;
}

.subnav {
  border: 3px solid #476f93;
  background-color: #fff;
  float: left;
  width: 344px;
  box-shadow: 0 0 8px #333;
  -moz-box-shadow: 0 0 8px #333;
  -webkit-box-shadow: 0 0 8px #333;
}

.membership .subnav, .aboutus .subnav, .membersonly .subnav {
  width: 200px;
}

.subnav img {
  position: absolute;
  top: 11px;
  left: 30px;
}

.menuItem:nth-child(5) .subnav img {
  left: 146px;
}

.menuItem:nth-child(6) .subnav img {
  left: 132px;
}

.membership .left, .aboutus .left, .membersonly .left {
  width: 180px;
}

/*******************************************
Media Queries
*******************************************/
@media(max-width:974px){
  .header-right {
    max-width: 100%;
    width:100%;
    padding: 15px;
    box-sizing: border-box;
  }
}


@media(max-width:700px){
  .sf_cols.utilityLinks, .utilityLinks{
    text-align:center;
  }
}

@media(max-width:730px){
  .main-nav {
  margin-top: 0;
  }
  #megaMenu {
  float: right;
  padding-top: 15px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  }
  .menuItem {
  float: none;
  position: relative;
  width: 100%;
  background-color: transparent; /* changes the background-color of main nav */
  padding: 15px;
  box-sizing: border-box;
  }
  .menuLink {
  display: block;
  font-size: 15px;
  background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right center;
  text-decoration: none;
  padding-right: 0px;
  margin-right: 0px;
  color: white;
  width: 100%;
  height: auto;
  }
  .menuItem .content {
  display: none;
  position: relative;
  top: 0;
  padding-top: 20px;
  left: 0;
  float: none;
  max-width: 100%;
  z-index: 10;
  margin: 0 auto;
  text-align: center;
  }
  .subnav {
  border: 0px;
  background-color: #fff;
  float: none;
  width: 100%;
  box-shadow: 0 0 8px #333;
  -moz-box-shadow: 0 0 8px #333;
  -webkit-box-shadow: 0 0 8px #333;
  }
  .content .left, .content .right {
  float: none;
  max-width: 100%;
  width:100%;
  padding: 0;
  box-sizing: border-box;
  }
  .calendarnav .menuLink {
  background: none;
  padding: 0;
  }
  .membership .subnav, .aboutus .subnav, .membersonly .subnav {
  max-width: 100%;
  width:100%;
  text-align: center;
  margin: 0 auto;
  }
  .membership .content, .aboutus .content, .membersonly .content {
  width: 100%;
  }
  .menuItem:nth-of-type(5) .content {
  left: 0;
  }
  .menuItem:nth-of-type(6) .content {
  left: 0;
  }
  .membersonly .menuLink {
  margin: 0 auto;
  }
  .content li {
  border: 1px solid #f1f1f1;
  }
  #header {
  max-height: 100%; /*300px*/
  margin-bottom: 45px;
  overflow: auto; /*hidden*/
  float: none;
  }
  .header-right, #content {
  float: left;
  max-width: 715px;
  width: 100%;
  }
  .menuItem:nth-child(5) .subnav img {
  left: 50%;
  }
  .menuItem:nth-child(6) .subnav img {
  left: 50%;
  }
  .subnav img {
  left: 50%;
  }

}



@media (max-width:600px){
  .canidates{
    width:100%;
    margin-bottom: 15px;
  }

  .sf_colsOut.sf_2cols_1_50,
  .sf_colsOut.sf_2cols_2_50{
    width:100%;
  }
  .sf_2cols_2_50 .sf_2cols_2in_50{
    margin-left:0 !important;
  }

}

//This JS was on the page already, maybe you can utilize it in someway.
$(document).ready(function(){

  var allPanels = $('.sflistItemContent').hide();
  $('.sflistListItem:first > .sflistItemContent').show();

  $('.sflistItemTitle').click(function() {
    allPanels.slideUp();
    $('.expanded').removeClass('expanded');
    $(this).next().slideDown();
    $(this).addClass('expanded');
    return false;
  });

  $('.menuItem:nth-child(3n)').addClass('calendarnav');
  $('.menuItem:nth-child(4n)').addClass('membership');
  $('.menuItem:nth-child(5n)').addClass('aboutus');
  $('.menuItem:nth-child(6n)').removeClass('calendarnav').addClass('membersonly');


  // Form input hide/display default text on focus/blur
  $(".sfsearchTxt").focus(function() {
          if(this.value == this.defaultValue) {
                  this.value = "";
          }
  }).blur(function() {
          if(!this.value.length) {
                  this.value = this.defaultValue;
          }
  });     


});

最佳答案

好的，我为此工作了大约一个半小时，这是相当多的工作。基本上，我所做的是复制父链接并将其作为第一项添加到它们各自的下拉列表中，并给它们一个“克隆”类。这样，使用 css 和媒体查询，这些选项只会出现在移动布局上，并在您将窗口调整回完整桌面 View 时消失。你自己说过，是的，它需要一些 javascript 来创建点击事件，当点击它们各自的父链接时，这些点击事件将使下拉菜单出现。为此，我使用了“event.preventDefault();”这会阻止链接转到它应该带你去的页面，然后立即使用 show() 使下拉列表出现(如果你使用 hide(); 再次单击它，它也会收起下拉列表)。最后，使用您的 CSS，我停用了下拉菜单上的悬停效果，但仅限于移动布局。桌面布局保持不变。这是代码:

$(document).ready(function(){
    if ($(".menuItem").css("float") == "left") {
        $(".content").css("display", "");   
    }
    var showDropDown = function(id) {
        if ($(".menuItem").css("float") == "none") {
            event.preventDefault();
            var id = "#" + id;
            var dropdownSelector = $(id).parent().children(".content");
            if (dropdownSelector.css("display") == "none") {
                dropdownSelector.show();
            }
            else {
                dropdownSelector.hide();
                dropdownSelector.css("display", "");
            }
        }
    };
    
    $("#resources").click(function() {showDropDown($("#resources").attr("id"))});
    $("#education").click(function() {showDropDown($("#education").attr("id"))});
    $("#calendar").click(function() {showDropDown($("#calendar").attr("id"))});
    $("#membership").click(function() {showDropDown($("#membership").attr("id"))});
    $("#about-us").click(function() {showDropDown($("#about-us").attr("id"))});
    $("#members-only").click(function() {showDropDown($("#members-only").attr("id"))});
});

body{
    background:#112B50;
}

ul{
    list-style:none;
}

.main-nav {
  clear: both;
  margin-top: 20px;
  float: left;
  width: 100%;
}

#megaMenu {
  float: right;
  padding-top: 15px;
  position:absolute;
}

.menuItem {
  float: left;
  position: relative;
}

.menuLink {
  display: block;
  color: #fff;
  font-size: 15px;
  background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right 5px;
  text-decoration: none;
  padding-right: 15px;
  margin-right: 22px;
}


.calendarnav .menuLink {
  background: none;
  padding: 0;
}

.membersonly .menuLink {
  margin: 0;
  color: #FC0;
}

.menuItem .content {
  display: none;
  position: absolute;
  top: 15px;
  padding-top: 20px;
  left: 0;
  float: left;
  max-width: 344px;
  z-index: 10;
}

.membership .content, .aboutus .content, .membersonly .content {
  width: 200px;
}

.menuItem:nth-of-type(5) .content {
  left: -118px;
}

.menuItem:nth-of-type(6) .content {
  left: -82px;
}

.menuItem:hover .content, 
.menuItem:active .content,
.menuItem:focus .content {
  display: block;
}

.calendarnav:hover .content {
  display: none;
}

.subnav {
  border: 3px solid #476f93;
  background-color: #fff;
  float: left;
  width: 344px;
  box-shadow: 0 0 8px #333;
  -moz-box-shadow: 0 0 8px #333;
  -webkit-box-shadow: 0 0 8px #333;
}

.membership .subnav, .aboutus .subnav, .membersonly .subnav {
  width: 200px;
}

.subnav img {
  position: absolute;
  top: 11px;
  left: 30px;
}

.menuItem:nth-child(5) .subnav img {
  left: 146px;
}

.menuItem:nth-child(6) .subnav img {
  left: 132px;
}

.membership .left, .aboutus .left, .membersonly .left {
  width: 180px;
}

.clone {
    display:none;
}

/*******************************************
Media Queries
*******************************************/
@media(max-width:974px){
  .header-right {
    max-width: 100%;
    width:100%;
    padding: 15px;
    box-sizing: border-box;
  }
}


@media(max-width:700px){
  .sf_cols.utilityLinks, .utilityLinks{
    text-align:center;
  }
}

@media(max-width:730px){
  .main-nav {
  margin-top: 0;
  }
  #megaMenu {
  float: right;
  padding-top: 15px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  }
  .menuItem {
  float: none;
  position: relative;
  width: 100%;
  background-color: transparent; /* changes the background-color of main nav */
  padding: 15px;
  box-sizing: border-box;
  }
  .menuLink {
  display: block;
  font-size: 15px;
  background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right center;
  text-decoration: none;
  padding-right: 0px;
  margin-right: 0px;
  color: white;
  width: 100%;
  height: auto;
  }
  .menuItem .content {
  display: none;
  position: relative;
  top: 0;
  padding-top: 20px;
  left: 0;
  float: none;
  max-width: 100%;
  z-index: 10;
  margin: 0 auto;
  text-align: center;
  }
  .subnav {
  border: 0px;
  background-color: #fff;
  float: none;
  width: 100%;
  box-shadow: 0 0 8px #333;
  -moz-box-shadow: 0 0 8px #333;
  -webkit-box-shadow: 0 0 8px #333;
  }
  .content .left, .content .right {
  float: none;
  max-width: 100%;
  width:100%;
  padding: 0;
  box-sizing: border-box;
  }
  .calendarnav .menuLink {
  background: none;
  padding: 0;
  }
  .membership .subnav, .aboutus .subnav, .membersonly .subnav {
  max-width: 100%;
  width:100%;
  text-align: center;
  margin: 0 auto;
  }
  .membership .content, .aboutus .content, .membersonly .content {
  width: 100%;
  }
  .menuItem:nth-of-type(5) .content {
  left: 0;
  }
  .menuItem:nth-of-type(6) .content {
  left: 0;
  }
  .membersonly .menuLink {
  margin: 0 auto;
  }
  .content li {
  border: 1px solid #f1f1f1;
  }
  #header {
  max-height: 100%; /*300px*/
  margin-bottom: 45px;
  overflow: auto; /*hidden*/
  float: none;
  }
  .header-right, #content {
  float: left;
  max-width: 715px;
  width: 100%;
  }
  .menuItem:nth-child(5) .subnav img {
  left: 50%;
  }
  .menuItem:nth-child(6) .subnav img {
  left: 50%;
  }
  .subnav img {
  left: 50%;
  }
    .menuItem:hover .content  {
        display: none;
    }
    
    .calendarnav:hover .content {
        display: none;
    }
    
    .clone {
        display:block;
    }
}



@media (max-width:600px){
  .canidates{
    width:100%;
    margin-bottom: 15px;
  }

  .sf_colsOut.sf_2cols_1_50,
  .sf_colsOut.sf_2cols_2_50{
    width:100%;
  }
  .sf_2cols_2_50 .sf_2cols_2in_50{
    margin-left:0 !important;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-nav">
    <ul id="megaMenu" class="menuContainer nav">
        <li class="menuItem"><a id="resources" class="menuLink" href="resources"><span class="menuText">Resources</span></a>
            <div class="content">
                <div class="subnav" id="drop-resources">
                    <img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
                    <div class="left">
                        <ul>
                            <li class="clone"><a href="resources">Resources</a>
                            <li><a href="/resources/resource-library">Resource Library</a>
                            </li>
                            <li><a href="/resources/legal-resources">Legal Resources</a>
                            </li>
                            <li><a href="/ask-the-experts/search-answers">Ask the Experts</a>
                            </li>
                            <li><a href="/resources/community">Community</a>
                            </li>
                            <li><a href="/resources/find-storage">Find Storage</a>
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                        <ul>
                            <li><a href="/resources/industry-buyers-guide">Buyer's Guide</a>
                            </li>
                            <li><a href="/resources/upcoming-auctions">Upcoming Auctions</a>
                            </li>
                            <li><a href="/resources/tssa-forms-software">Forms Software</a>
                            </li>
                            <li><a href="/resources/news/self-storage-news-magazine">Self Storage News Magazine</a>
                            </li>
                            <a href="/resources/community/open-for-business-blog">
                                <li>Blog</li>
                            </a>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="menuItem activeItem"><a id="education" class="menuLink" href="education"><span class="menuText">Education</span></a>
            <div class="content">
                <div class="subnav" id="drop-education">
                    <img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
                    <div class="left">
                        <ul>
                            <li class="clone"><a href="education">Education</a>
                            <li><a href="/education/conference-trade-show/conference-and-trade-show-2015/general-info">Annual Conference</a>
                            </li>
                            <li><a href="/education/executive-retreat-2015/home">Executive Retreat</a>
                            </li>
                            <li><a href="/education/luncheon-calendar">Luncheons</a>
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                        <ul>
                            <li><a href="/education/tssa-webinars">Webinars</a>
                            </li>
                            <li><a href="/education/tssa-podcasts">Podcasts</a>
                            </li>
                            <li><a target="_blank" href="/photos/txssa/sets/">Luncheon Photos</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="menuItem"><a id="calendar" class="menuLink" href="calendar"><span class="menuText">Calendar</span></a>
            <div class="content">
                <div class="subnav" id="drop-calendar">
                    <img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
                    <div class="left">
                        <ul id="calendarOptions">
                            <li class="clone"><a href="calendar">Calendar</a>
                            <li><a href="/calendar">All Calendar Items</a>
                            </li>
                            <li><a href="66554bfc-9970-6e48-8fd4-ff0000ccdd76">Luncheon Calendar</a>
                            </li>
                            <li><a href="9d574bfc-9970-6e48-8fd4-ff0000ccdd76">Deadline Calendar</a>
                            </li>
                            <li><a href="71594bfc-9970-6e48-8fd4-ff0000ccdd76">Education Calendar</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="menuItem membership"><a id="membership" class="menuLink" href="membership"><span class="menuText">Membership</span></a>
            <div class="content">
                <div class="subnav" id="drop-membership">
                    <img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
                    <div class="left">
                        <ul>
                            <li class="clone"><a href="membership">Membership</a>
                            <li><a href="/membership/member-benefits" originalpath="/membership/member-benefits" originalattribute="href">Membership Benefits</a>
                            </li>
                            <li><a href="/membership/join-tssa">Join REDACTED</a>
                            </li>
                            <li><a href="/membership/pay-my-dues">Pay My Dues</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="menuItem aboutus"><a id="about-us" class="menuLink" href="about-us"><span class="menuText">About Us</span></a>
            <div class="content">
                <div class="subnav" id="drop-about">
                    <img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
                    <div class="left">
                        <ul>
                            <li class="clone"><a href="about-us">About Us</a>
                            <li><a href="/about-us/contact-us">Contact Us</a>
                            </li>
                            <li><a href="/about-us/board">Board</a>
                            </li>
                            <li><a href="/about-us/boardnominations">Board Nominations</a>
                            </li>
                            <li><a href="/about-us/committees">Committees</a>
                            </li>
                            <li><a href="/about-us/faqs">FAQs</a>
                            </li>
                            <li><a href="/about-us/charitable-fundraising">Charitable Fundraising</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="menuItem membersonly"><a id="members-only" class="menuLink" href="members-only"><span class="menuText">Members Only</span></a>
            <div class="content">
                <div id="drop-members" class="subnav">
                    <img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
                    <div class="left">
                        <ul>
                            <li class="clone"><a href="members-only">Members Only</a>
                            <li><a href="/members-only/my-account">My Account</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

这也是我工作的 jsfiddle:http://jsfiddle.net/381nxmuo/

关于javascript - 移动菜单帮助，将父链接添加到下拉列表，禁用父链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31389678/

javascript - 移动菜单帮助，将父链接添加到下拉列表，禁用父链接

上一篇：html - 选项卡式内容区域中的内容呈现

下一篇：html - 不规则图库 Bootstrap