时间戳

首页 > 解决方案 > 当面包屑出现在移动网站中时如何缩短它

javascript - 当面包屑出现在移动网站中时如何缩短它

问题描述

当我在移动设备上查看带有很多过滤器的网站时，面包屑长度变得太大。所以我想替换倒数第二个 li 后面的所有 li 标签。这意味着除了第一个、最后一个和最后一个 li 之外的所有 li 都需要用点替换。

任何人都可以用 jquery、javascript 或 css 帮我解决这个问题吗？

<ul class="left">
  <li class="active"><a href="#">Airways</a></li>
  <li><a href="#">Trauma</a></li>
  <li><a href="#">Medical</a></li>
  <li><a href="#">OB | Peds</a></li>
  <li><a href="#">Patient Assessment</a></li>
  <li><a href="#">Proprietary</a></li>
  <li><a href="#">Trauma</a></li>
  <li><a href="#">Medical</a></li>
  <li><a href="#">OB | Peds</a></li>
  <li><a href="#">Patient Assessment</a></li>
  <li><a href="#">Proprietary</a></li>
</ul>

这只是我在此处添加的示例代码。

标签： javascriptphphtmljquerycss

解决方案

你可以试试这样的jquery。基本上，如果它是一个较小宽度的设备，并且如果它不是第一个、最后一个或倒数第二个孩子，则链接标签的文本将替换为 '..' 。

        <script>
        $(document).ready(function () {  

            if (window.matchMedia("(max-width: 767px)").matches) 
            { 
                // The viewport is less than 768 pixels wide 
                console.log("This is a mobile device.");                     
                $('ul.left li').each(function() {
                    $this = $(this); // cache $(this)                     
                    if (! $this.is(':first-child') && ! $this.is(':nth-last-child(2)') && ! $this.is(':last-child')    ) {
                          $this.find('a').text("..");
                    }                       
               });                  
            }     
        });
    </script>

推荐阅读