Javascript 如何缩短面包屑出现在手机网站上的时间

当我在手机上用很多过滤器浏览我的网站时，面包屑的长度变得太大了。所以我想替换第二个最后一个li后面的所有li标记。这意味着除了第一个、最后一个和最后一个1个li以外的所有li都需要用点替换

有人能帮我用jquery、javascript或css解决这个问题吗

您可以像这样尝试使用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>

$（文档）.ready（函数（）{
if（window.matchMedia（（（最大宽度：767px）”）.matches）
{ 
//视口宽度小于768像素
log（“这是一个移动设备”）；
$（'ul.left li'）。每个（函数（）{
$this=$（this）；//缓存$（this）
如果（！$this.is（':first child'）&&&（！$this.is（':n最后一个孩子（2））&&&！$this.is（':last child'））{
$this.find（'a'）.text（“…”）；
}                       
});                  
}     
});

您可以像这样尝试使用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>

$（文档）.ready（函数（）{
if（window.matchMedia（（（最大宽度：767px）”）.matches）
{ 
//视口宽度小于768像素
log（“这是一个移动设备”）；
$（'ul.left li'）。每个（函数（）{
$this=$（this）；//缓存$（this）
如果（！$this.is（':first child'）&&&（！$this.is（':n最后一个孩子（2））&&&！$this.is（':last child'））{
$this.find（'a'）.text（“…”）；
}                       
});                  
}     
});

这是我关于堆栈溢出的第一个答案，希望这是你想要的。这是代码笔链接

https://codepen.io/vatzkk/pen/yLYMJeG

HTML

...

Javascript

//您可以在这里添加您的条件
document.getElementById（“下拉”）.style.display=“block”；
var arr=[…document.getElementById（“bread”）.children]；
var dropdownItems=arr.slice（2，-2）；
dropdownItems.map（项目=>{
文件.getElementById（“面包”）.removeChild（项目）；
document.getElementById（“下拉列表”）.appendChild（项）；
}); 

这是我关于堆栈溢出的第一个答案，希望这是你想要的。这是代码笔链接

https://codepen.io/vatzkk/pen/yLYMJeG

HTML

...

Javascript

//您可以在这里添加您的条件
document.getElementById（“下拉”）.style.display=“block”；
var arr=[…document.getElementById（“bread”）.children]；
var dropdownItems=arr.slice（2，-2）；
dropdownItems.map（项目=>{
文件.getElementById（“面包”）.removeChild（项目）；
document.getElementById（“下拉列表”）.appendChild（项）；
}); 

纯CSS工作示例：

首先给你的清单上一节课

<ul class="left breadcrumblist">

---

纯CSS工作示例：

首先给你的清单上一节课

<ul class="left breadcrumblist">

---

谢谢大家的指导，最后我根据我的要求做了一些工作，我想在这里分享，因为将来如果有人寻找同样的问题，他或她可以从中受益。这也是您刚才发布的所有修改的结果

<ul class="left" id="bread_cumb">
 $(document).ready(function(){
        if (window.matchMedia("(max-width: 767px)").matches) 
        
            var width = $(window).width();
            if (width < 720) {
               
            $('#bread_cumb li:not(:first-child):not(:nth-child(2)):not(:last- 
            child):not(:nth-last-child(2))').html('<span style="margin- 
            left:7px;margin-right:7px;">  ...  </span>');
            var last =$('#bread_cumb li:last-child').text();
            var re = /^([A-Za-z0-9_'",.!@#$%^&*()-+=?/\|:]+)[\s,;:]+([a-z]+)/i;  
                var m = re.exec(last);
            $('#bread_cumb li:last-child').html('<a>'+m[1]+' '+m[2]+'...</a>');
               
            }
          });
Thanks all for your valuable ideas.

$（文档）.ready（函数（）{
if（window.matchMedia（（（最大宽度：767px）”）.matches）
变量宽度=$（窗口）.width（）；
如果（宽度<720）{
$面包：不是（第一个孩子）：不是（第n个孩子）（2）：不是（最后一个孩子）
child）：不是（：n最后一个子（2）））.html（“…”）；
var last=$（“#bread_cumb li:last child”）.text（）；
变量re=/^（[A-Za-z0-9'，.！@$%^&*（）-+=？/\\\\\：]+）[\s，；：]+（[A-z]+）/i；
var m=重新执行（最后一次）；
$（'bread_cumb li:last child'）.html（'+m[1]+'+m[2]+'）；
}
});
谢谢大家的宝贵意见。

谢谢大家的指导，最后我根据我的要求做了一些工作，我想在这里分享，因为将来如果有人寻找同一个问题，他或她可以从中受益。这也得益于您刚才发布的所有修改

<ul class="left" id="bread_cumb">
 $(document).ready(function(){
        if (window.matchMedia("(max-width: 767px)").matches) 
        
            var width = $(window).width();
            if (width < 720) {
               
            $('#bread_cumb li:not(:first-child):not(:nth-child(2)):not(:last- 
            child):not(:nth-last-child(2))').html('<span style="margin- 
            left:7px;margin-right:7px;">  ...  </span>');
            var last =$('#bread_cumb li:last-child').text();
            var re = /^([A-Za-z0-9_'",.!@#$%^&*()-+=?/\|:]+)[\s,;:]+([a-z]+)/i;  
                var m = re.exec(last);
            $('#bread_cumb li:last-child').html('<a>'+m[1]+' '+m[2]+'...</a>');
               
            }
          });
Thanks all for your valuable ideas.

$（文档）.ready（函数（）{
if（window.matchMedia（（（最大宽度：767px）”）.matches）
变量宽度=$（窗口）.width（）；
如果（宽度<720）{
$面包：不是（第一个孩子）：不是（第n个孩子）（2）：不是（最后一个孩子）
child）：不是（：n最后一个子（2）））.html（“…”）；
var last=$（'面包#cumb li:l