关于PBOOTCMS产品页左侧的导航菜单点击展开和收缩问题的详解

2022-11-08 0 493

今天给客户做个站点,是非常常规的一个企业站,客户要求在产品列表页做一个分类导航,起初没什么稀奇的,样子如下:

关于PBOOTCMS产品页左侧的导航菜单点击展开和收缩问题的详解

 

这是我们点击一级菜单时,会展开对应一级的二级菜单,再点击二级菜单时会跳转到二级菜单的列表页面。

具体代码如下:

  <ul>  
	{pboot:nav}                   
    <li class="menu-item {pboot:if('[nav:scode]'=='{sort:tcode}')}niubi{/pboot:if}">
      <a href="[nav:link]" rel="external nofollow"  rel="external nofollow" >[nav:name]</a>
      <ul class="sub-menu">
	    {pboot:2nav parent=[nav:scode]}
        <li><a href="[2nav:link]" rel="external nofollow"  rel="external nofollow" >[2nav:name]</a></li>
		{/pboot:2nav}
      </ul>
    </li>
	{/pboot:nav}
  </ul>

到这一步,我们直接上jQuery 库添加点击显示与隐藏功能,具体代码如下:

  <script>
    $(function() {
      $('.menu-item > a').click(function(event) {
        event.preventDefault();
        $(this).siblings('.sub-menu').slideToggle();
      });
    });
  </script>

在这个示例中,我们使用了 jQuery 库。我们首先需要确认已经引入了 jQuery 库,然后在 $(function() {...}) 中定义了一个事件处理程序。我们选择所有菜单项的链接,然后使用 click 方法来监听链接的点击事件。当链接被点击时,防止默认行为(跳转页面),然后使用 siblings 方法选择链接的兄弟元素,即对应的子菜单,再使用 slideToggle 方法切换子菜单的显示和隐藏。

当用户点击菜单时,对应的子菜单将显示或隐藏。

到这一步,项目雏形已经基本确认完毕了,可以看到,我们使用pb的IF判断,将当前菜单设置了高亮Class:”niubi”;接下来,我们需要在点击显示与隐藏的基础上,将高亮菜单的子菜单默认展开,具体代码如下:

  <script>
    $(function() {
      $('.menu-item > a').click(function(event) {
        event.preventDefault();
        $(this).siblings('.sub-menu').slideToggle();
      });

      $('.niubi > .sub-menu').show();
    });
  </script>

在这个示例中,我们添加了一个名为 niubi 的菜单项,并在其对应的子菜单上添加了 show 方法,使其在页面加载时默认展开。我们使用了 jQuery 库,并在 $(function() {...}) 中定义了两个事件处理程序。首先,我们选择所有菜单项的链接,并使用 click 方法来监听链接的点击事件。当链接被点击时,防止默认行为(跳转页面),然后使用 siblings 方法选择链接的兄弟元素,即对应的子菜单,再使用 slideToggle 方法切换子菜单的显示和隐藏。

接着,我们选择 niubi 类的菜单项,并使用 show 方法来显示其对应的子菜单,从而使其在页面加载时默认展开。

当用户点击菜单时,对应的子菜单将显示或隐藏。同时,如果特定菜单项具有特定 class,其对应的子菜单将在页面加载时默认展开。

但是在以上代码中,一级菜单项的链接虽然是是可以被点击的,但是它们的点击事件默认被阻止了(使用了 event.preventDefault() 方法),因此当用户点击一级菜单项时,页面不会跳转,而只会展开或收起对应的子菜单。

这时,我们如果想让一级菜单可以点击,又能有收缩功能,那么是不是冲突了?因为它点击直接跳转了,跳转等于刷新了,那就没有收缩一说了,所以我在想,让它如果是展开状态,那么点击它为收缩,如果它是收缩状态,那么点击它就执行跳转,上面我们已经做过了高亮就展开,那么跳转后自然页面会加载,也就自动完成了跳转并展开了。

具体代码如下:

$(function() {
  $('.menu-item > a').click(function(event) {
    var subMenu = $(this).siblings('.sub-menu');
    if (subMenu.length > 0) {
      if ($(this).parent().hasClass('niubi')) {
        if (subMenu.is(':visible')) {
          subMenu.slideUp();
          event.stopPropagation();
          event.preventDefault();
        } else {
          subMenu.slideDown();
        }
      } else if (subMenu.is(':visible')) {
        subMenu.slideUp();
        event.stopPropagation();
      } else {
        return true;
      }
    }
  });

  $('.niubi > .sub-menu').show();
});

那么最后,我们来看一下最终的效果,并附上完整代码:

关于PBOOTCMS产品页左侧的导航菜单点击展开和收缩问题的详解

最终完成的效果是:

点击产品中心(一级分类)>跳转并展开

点击产品中心下二级菜单>跳转并保持展开

再次点击产品中心(展开的一级分类)>收缩不在跳转

点击行业应用(其他一级分类)>跳转并展开行业应用(同时收起其他一级菜单)

 

啰嗦了这么多,直接上完整代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>左侧菜单</title>
  <style>
    .sub-menu {
      display: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul>  
	{pboot:nav}                   
    <li class="menu-item {pboot:if('[nav:scode]'=='{sort:tcode}')}niubi{/pboot:if}">
      <a href="[nav:link]" rel="external nofollow"  rel="external nofollow" >[nav:name]</a>
      <ul class="sub-menu">
	    {pboot:2nav parent=[nav:scode]}
        <li><a href="[2nav:link]" rel="external nofollow"  rel="external nofollow" >[2nav:name]</a></li>
		{/pboot:2nav}
      </ul>
    </li>
	{/pboot:nav}
  </ul>
  <script>
$(function() {
  $('.menu-item > a').click(function(event) {
    var subMenu = $(this).siblings('.sub-menu');
    if (subMenu.length > 0) {
      if ($(this).parent().hasClass('niubi')) {
        if (subMenu.is(':visible')) {
          subMenu.slideUp();
          event.stopPropagation();
          event.preventDefault();
        } else {
          subMenu.slideDown();
        }
      } else if (subMenu.is(':visible')) {
        subMenu.slideUp();
        event.stopPropagation();
      } else {
        return true;
      }
    }
  });

  $('.niubi > .sub-menu').show();
});
  </script>
</body>
</html>

 

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 PbootCms相关教程 关于PBOOTCMS产品页左侧的导航菜单点击展开和收缩问题的详解 https://www.niceym.com/63391.html

发表评论
暂无评论