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

我已经寻找了一段时间的方法来完成我试图完成的事情，但没有找到任何可以帮助我或解释得足够好让我理解的方法。我有我正在做的这个。我有一些问题要让它以我想要的方式工作。我想将父链接克隆到下拉区域，并确保父链接已禁用（仅在移动设备上），并且仅在单击时显示下拉列表。我知道这可以通过使用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>

JS

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和媒体查询，这些选项只会出现在移动布局上，当您将窗口调整回完整的桌面视图时，这些选项就会消失。您自己也说过，是的，它需要一些javascript来创建单击事件，这些事件将在单击它们各自的父链接时显示下拉列表。为此，我使用了“event.preventDefault（）；”，它阻止链接转到它应该带您去的页面，然后立即使用show（）显示下拉列表（如果您再次使用hide（）单击下拉列表，它也会将下拉列表放在一边）。最后，使用css，我禁用了下拉菜单上的悬停效果，但仅限于移动布局。桌面布局保持不变。代码如下：

$（文档）.ready（函数（）{
if（$（“.menuItem”）.css（“float”）=“left”）{
$（“.content”）.css（“display”，”）；
}
var showDropDown=函数（id）{
如果（$（“.menuItem”）.css（“浮点”）=“无”）{
event.preventDefault（）；
变量id=“#”+id；
var dropdownSelector=$（id）.parent（）.children（“.content”）；
if（dropdownSelector.css（“显示”）=“无”）{
dropdownSelector.show（）；
}
否则{
dropdownSelector.hide（）；
css（“display”，“display”）；
}
}
};
$（“#资源”）。单击（函数（）{showDropDown（$（“#资源”）.attr（“id”）}）；
$（“#教育”）。单击（函数（）{showDropDown（$（“#教育”）.attr（“id”）}）；
$（“#日历”）。单击（函数（）{showDropDown（$（“#日历”）.attr（“id”）}）；
$（“#成员身份”）。单击（函数（）{showDropDown（$（“#成员身份”）.attr（“id”）}）；
$（“#关于我们”）。单击（函数（）{showDropDown（$（“#关于我们”）.attr（“id”）}）；
$（“#仅限成员”）。单击（函数（）{showDropDown（$（“#仅限成员”）.attr（“id”）}）；
});
正文{
背景#112B50；
}
保险商实验室{
列表样式：无；
}
.主导航{
明确：两者皆有；
边缘顶部：20px；
浮动：左；
宽度：100%；
}
#超级菜单{
浮动：对；
填充顶部：15px；
位置：绝对位置；
}
梅努特姆先生{
浮动：左；
位置：相对位置；
}
梅努利克先生{
显示：块；
颜色：#fff；
字体大小：15px；
背景：url（'http://s22.postimg.org/5ll1ux2r1/nav_arrow.png’）右5px无重复；
文字装饰：无；
右侧填充：15px；
右边距：22px；
}
.calendarnav.menuLink{
背景：无；
填充：0；
}
.membersonly.menuLink{
保证金：0；
颜色：#FC0；
}
.menuItem.content{
显示：无；
位置：绝对位置；
顶部：15px；
填充顶部：20px；
左：0；
浮动：左；
最大宽度：344px；
z指数：10；
}
.membership.content、.aboutus.content、.membersonly.content{
宽度：200px；
}
.menuItem:n个类型（5）。内容{
左：-118px；
}
.menuItem:n类型（6）.内容{
左：-82px；
}
.menuItem:hover.content，
.menuItem:active.content，
.menuItem:focus.content{
显示：块；
}
.calendarnav:hover.content{
显示：无；
}
.subnav{
边框：3px实心#476f93；
背景色：#fff；
浮动：左；
宽度：344px；
盒影：08px#333；
-moz盒阴影：08px#333；
-网络工具包盒阴影：0 0 8px#333；
}
.membership.subnav、.aboutus.subnav、.membersonly.subnav{
宽度：200px；
}
.subnav img{
位置：绝对位置；
顶部：11px；
左：30px；
}
.menuItem:第n个孩子（5）.子AV img{
左：146px；
}
.menuItem:n个孩子（6）。子AV img{
左：132px；
}
.membership.left、.aboutus.left、.membersonly.left{
宽度：180px；
}
.克隆{
显示：无；
}
/*******************************************
媒体查询
*******************************************/
@介质（最大宽度：974px）{
.右标题{
最大宽度：100%；
宽度：100%；
填充：15px；
框大小：边框框；
}
}
@介质（最大宽度：700px）{
.sf_cols.utilityLinks、.utilityLinks{
文本对齐：居中；
}
}
@介质（最大宽度：730px）{
.主导航{
边际上限：0；
}
#超级菜单{
浮动：对；
填充顶部：15px；
宽度：100%；
位置：相对位置；
框大小：边框框；
}
梅努特姆先生{
浮动：无；
位置：相对位置；
宽度：100%；
背景色：透明；/*更改主导航的背景色*/
填充：15px；
框大小：边框框；
}
梅努利克先生{
显示：块；
字体大小：15px；
背景：url（'http://s22.postimg.org/5ll1ux2r1/nav_arrow.png’）右中无重复；
文字装饰：无；
右边填充：0px；
右边距：0px；
颜色：白色；
宽度：100%；
高度：自动；
}
.menuItem.content{
显示：无；
位置：相对位置；
排名：0；
填充顶部：20px；
左：0；
浮动：无；
最大宽度：100%；
z指数：10；
保证金：0自动；
文本对齐：居中；
}
.subnav{
边界：0px；
背景色：#fff；
浮动：无；
宽度：100%；
盒影：08px#333；
-moz盒阴影：08px#333；
-网络工具包盒阴影：0 0 8px#333；
}
.content.left、.content.right{
浮动：