如何扩展将徽标移动到多个 UL 的导航中的脚本

Question

我最近设置了 jQuery 脚本来将徽标移动到我的主导航的中心，宽度仅超过 980。它在单个无序列表上效果很好。但是当我在导航中添加几个无序列表时，它就会变得混乱。我不确定我在这里做错了什么。如果我再添加一个无序列表，我可以让它工作，但这是我能做到的。

非工作版本：https://codepen.io/robwdev/pen/Ngeewa

工作版本：https://codepen.io/robwdev/pen/zzyyJQ

jQuery:

jQuery(document).ready(function() {

  function addLogoToMiddle() {
    var middle = Math.ceil($(".navbar-nav li").length / 2);
    var logoListItem = $('#logo-wrapper').appendTo('<li id="logo-item"></li>');
    $(".navbar-nav li:nth-child(" + middle + ")").after(logoListItem);
  }

  function addLogoToSide() {
    $('#small-screen-logo').append($('#logo-wrapper'));
    // don't forget to remove the list item element from the navbar
    $('#logo-item').remove();
  }

  $(window).resize(function() {
    if ($(window).width() > 980) {
      addLogoToMiddle();
    } else {
      addLogoToSide();
    }
  });

  $(document).ready(function() {
    if ($(window).width() > 980) {
      addLogoToMiddle();
    }
  });

});

Answer 1

您在 html 中有一些错误。您需要为顶级列表使用唯一标识符。

jQuery(document).ready(function() {

  function addLogoToMiddle() {
      var middle = Math.ceil($(".test>li").length / 2);
      var logoListItem = $('#logo-wrapper').appendTo('<li id="logo-item"></li>');
      console.log(middle);
      $(".test>li:nth-child(" + middle + ")").after(logoListItem);
  }

  function addLogoToSide() {
      $('#small-screen-logo').append($('#logo-wrapper'));
      // don't forget to remove the list item element from the navbar
      $('#logo-item').remove();
  }

  $(window).resize(function() {
      if ($(window).width() > 980) {
          addLogoToMiddle();
      } else {
          addLogoToSide();
      }
  });

  $(document).ready(function() {
      if ($(window).width() > 980) {
          addLogoToMiddle();
      }
  });

});

 <div class="dev-nav-wrapper wrapper-fluid wrapper-navbar" id="wrapper-navbar">

<nav class="dev-navbar-tggl navbar navbar-toggleable-md navbar-inverse bg-inverse">

<h2>Not Working</h2>
 
<div class="dev-nav-container container">
<div id="small-screen-logo">
<div id="logo-wrapper">
<!-- Your site title as branding in the menu -->
<a href="http://dev-site/" class="navbar-brand custom-logo-link" rel="home" itemprop="url"><img src="http://oi211.photobucket.com/albums/bb113/182barbie/Fondo-1.png" alt="Logo" height="70" width="100"></a><!-- end custom logo -->
</div>
</div>
<!-- The WordPress Menu goes here -->
<div id="navbarNavDropdown" class="collapse navbar-collapse">
<ul id="main-menu" class="navbar-nav-nav test">
 <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
  <ul id="main-menu" class="navbar-nav">
   <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
   <a title="link1" href="http://dev-site/donate/" class="nav-link">link1</a>
   </li>
   <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
   <a title="link2" href="http://dev-site/shop/" class="nav-link">link2</a>
   </li>
   <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-167">
   <a title="link1" href="http://dev-site/jobs-training/" class="nav-link">link3</a>
   </li>
   <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-17"><a title="About Us" href="http://dev-site/about-us/" class="nav-link">link4</a></li>
   <li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-186"><a title="link5" href="http://dev-site/blog/" class="nav-link">link5</a></li>
   <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-16"><a title="link6" href="http://dev-site/resource-center/" class="nav-link">link6</a></li>
  </ul>
 </li>
 <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
  <ul id="2nd-menu" class="navbar-nav">
   <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
    <ul id="main-menu" class="navbar-nav">
    <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
    <a title="link1" href="http://dev-site/donate/" class="nav-link">link1</a>
    </li>
    <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
    <a title="link2" href="http://dev-site/shop/" class="nav-link">link2</a>
    </li>
    <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-167">
    <a title="link1" href="http://dev-site/jobs-training/" class="nav-link">link3</a>
    </li>
    <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-17">
    <a title="About Us" href="http://dev-site/about-us/" class="nav-link">link4</a>
    </li>
    <li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-186">
    <a title="link5" href="http://dev-site/blog/" class="nav-link">link5</a>
    </li>
    <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-16">
    <a title="link6" href="http://dev-site/resource-center/" class="nav-link">link6</a>
    </li>
    </ul>
   </li>
   <!-- <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-167">  -->
  </ul>
 </li>
 <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
  <ul id="2nd-menu" class="navbar-nav">
   <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
     <ul id="main-menu" class="navbar-nav">
     <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
     <a title="link1" href="http://dev-site/donate/" class="nav-link">link1</a>
     </li>
     <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
     <a title="link2" href="http://dev-site/shop/" class="nav-link">link2</a>
     </li>
     <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-167">
     <a title="link1" href="http://dev-site/jobs-training/" class="nav-link">link3</a>
     </li>
     <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-17">
     <a title="About Us" href="http://dev-site/about-us/" class="nav-link">link4</a>
     </li>
     <li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-186"><a title="link5" href="http://dev-site/blog/" class="nav-link">link5</a>
     </li>
     <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-16"><a title="link6" href="http://dev-site/resource-center/" class="nav-link">link6</a>
     </li>
     </ul>
         </li>
   <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-17"><a title="About Us" href="http://dev-site/about-us/" class="nav-link">link4</a></li>
   <li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-186">
  </ul>
 </li>
 <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
  <ul id="2nd-menu" class="navbar-nav">
   <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
    <ul id="main-menu" class="navbar-nav">
     <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
     <a title="link1" href="http://dev-site/donate/" class="nav-link">link1</a></li>
     <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
     <a title="link2" href="http://dev-site/shop/" class="nav-link">link2</a></li>
     <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-167">
     <a title="link1" href="http://dev-site/jobs-training/" class="nav-link">link3</a></li>
     <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-17">
     <a title="About Us" href="http://dev-site/about-us/" class="nav-link">link4</a></li>
     <li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-186">
     <a title="link5" href="http://dev-site/blog/" class="nav-link">link5</a></li>
     <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-16">
     <a title="link6" href="http://dev-site/resource-center/" class="nav-link">link6</a></li>
    </ul>
      </li>
  <!-- <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-16"> -->
  </ul>
 </li>
 <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
  <ul id="2nd-menu" class="navbar-nav">
  <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
   <ul id="main-menu" class="navbar-nav">
    <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
    <a title="link1" href="http://dev-site/donate/" class="nav-link">link1</a>
    </li>
    <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
    <a title="link2" href="http://dev-site/shop/" class="nav-link">link2</a></li>
    <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-167">
    <a title="link1" href="http://dev-site/jobs-training/" class="nav-link">link3</a></li>
    <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-17">
    <a title="About Us" href="http://dev-site/about-us/" class="nav-link">link4</a></li>
    <li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-186">
    <a title="link5" href="http://dev-site/blog/" class="nav-link">link5</a></li>
    <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-16">
    <a title="link6" href="http://dev-site/resource-center/" class="nav-link">link6</a></li>
   </ul>
  </li>
     </ul>
    </li>
</ul>
 
</div>      
</div><!-- .container -->
</nav><!-- .site-navigation -->
</div>

Answer 2

jQuery(document).ready(function() {

  function addLogoToMiddle() {
      var middle = Math.ceil($("#main-menu > li").length / 2);
      console.log(middle);
      var logoListItem = jQuery('#logo-wrapper').appendTo('<li id="logo-item"></li>');
      jQuery("#main-menu > li:nth-child(" + middle + ")").after(logoListItem);
  }



  function addLogoToSide() {
      jQuery('#small-screen-logo').append($('#logo-wrapper'));
      // don't forget to remove the list item element from the navbar
      jQuery('#logo-item').remove();
  }


   if (jQuery(window).width() > 980) {
          addLogoToMiddle();
          console.log("+980");
      } else {
          addLogoToSide();
          console.log("-980");
      }





  jQuery(window).resize(function() {
      if (jQuery(window).width() > 980) {
          addLogoToMiddle();
          console.log("+980");
      } else {
          addLogoToSide();
          console.log("-980");
      }

      if (jQuery(window).width() > 980) {
         console.log("+980");
          addLogoToMiddle();

      }
  });

如何扩展将徽标移动到多个 UL 的导航中的脚本

How to extend script that moves logo into a nav of multiple UL's

html

javascript

wordpress

jquery

wp-nav-walker