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

Question

我已经找了一段时间来寻找一种方法去做我想要完成的事情，但却找不到任何可以帮助我或解释得足以让我理解的东西。我有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;
  }

}

JS

//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;
          }
  });     


});

Answer 1

好的，我在这上工作了大约一个半小时，这是相当多的工作。基本上，我所做的是复制父链接并将其作为第一项添加到各自的下拉列表中，并为他们提供了一个＆＃34; clone＆＃34;的类。这样，使用css和媒体查询时，这些选项仅显示在移动布局上，并在您将窗口调整回完整桌面视图时消失。你自己说，是的，它需要一些javascript来创建点击事件，这将使得在点击各自的父链接时显示下拉列表。为此，我使用＆＃34; event.preventDefault（）;＆＃34;这会阻止链接进入它应该带你的页面，然后立即使用show（）来显示下拉列表（如果你再次使用hide（）再次点击它，它也会放下下拉列表; ）。最后，使用你的css，我在下拉菜单上停用了悬停效果，但仅限于移动布局。桌面布局保持不变。这是代码：

＆＃13;

＆＃13;

$(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"))});
});

＆＃13;

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;
}
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这里也是我工作的地方：http://jsfiddle.net/381nxmuo/