javascript - 如何扩展将 Logo 移动到多个 UL 导航中的脚本

标签 javascript jquery html wordpress wp-nav-walker

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

非工作版本: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();
    }
  });

});

最佳答案

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

关于javascript - 如何扩展将 Logo 移动到多个 UL 导航中的脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45060789/

上一篇：javascript - 如何在javascript中检测浏览器选项卡是否关闭或浏览器窗口是否关闭

下一篇：javascript - 从javascript函数注入(inject)javascript资源

相关文章：

javascript - 如何通过单击页面关闭覆盖

javascript - 使用 javascript 进行远程 => true 调用

javascript - 使 html 看板可滚动

javascript - jQuery/JS - 检测/匹配 URL 字符串以确定其类型

javascript - 解析分组的json

html - ASP.NET MVC4 - 将包含字符串的 HTML 显示为原始 HTML

javascript - 如何使用cropper插件获取dataurl并将dataurl显示为图像

javascript - 扩展 JSS 样式类而不是覆盖它

javascript - 我在哪里可以找到像 facebook 这样的滚动条插件？

javascript - 使用 jQuery 过滤元素

©2024 IT工具网  联系我们