用jquery改变宽度前的<hr />

Posted 2023-05-08

【中文标题】用jquery改变宽度前的<hr />

【英文标题】：Change <hr /> before width with jquery

【发布时间】：2021-10-22 08:06:54

【问题描述】：

免责声明：我知道类似的问题已经发布了很多次，但经过大量研究后我无法找到解决方案。

您好，在我正在构建的网站上有一个带有过滤选项的菜单。这些选项由“a”标签和下面的“hr”组成。这里的想法是在按下选项时增加“hr”之前部分的大小。

html 代码：

<div style="padding-left: 15px; width: 100%">
    <a class="style-filter-item-options" style="color: #000 !important;" id="filter-option-id-latest">Latest</a>
    <a class="style-filter-item-options" id="filter-option-id-most-views">Most Views</a>
    <a class="style-filter-item-options" id="filter-option-id-random">Random</a>
    <hr id="video-index-hr-id" class="style-menus-hr" style="margin-bottom: 1.25rem; width: 100%; margin-left: 0; margin-right: 0; padding-right: 0;">
</div>

相关CSS：

.style-menus-hr 
    background-color: #c4c4c4 !important;
    border: none !important;
    display: block !important;
    height: 1px !important;
    overflow: visible !important;
    position: relative !important;
    max-width: 96% !important;


.style-menus-hr:before 
    background-color: #ff5c33 !important;
    content: '' !important;
    display: block !important;
    height: 1px !important;
    left: 0 !important;
    position: absolute !important;
    width: 5% !important;
    z-index: 1 !important;

JQuery 表示示例：

<script>
    $("#filter-option-id-latest").click(function()
        $("#video-index-hr-id before").css('width', '5%');
    );
    
    $("#filter-option-id-most-views").click(function()
        $("#video-index-hr-id before").css('width', '15%');
    );
</script>

图像表示：

【问题讨论】：

为什么您的所有属性都标记为!important？当然有一种方法可以增加这些选择器的特异性？

这能回答你的问题吗？ Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

jquery 不适用于选择器中的伪类 :before 和 :after。

$("#video-index-hr-id before") 选择器有什么用？我不知道 <before> 元素或标签。

@HereticMonkey 我使用模板中的 css，有时我创建的属性由于其他 css 而未应用。说来话长，但它的工作原理是这样的。

【参考方案1】：

考虑只使用 DIV 元素。见例子：

$(function() 
  $(".style-filter-item-options").click(function() 
    var percent = Math.round( $(this).position().left / $(document).width() * 100);
    console.log(percent);
    $("#video-index-hr-id .style-menus-bar").css("width", percent + "%");
  );
);

.style-menus-hr 
  background-color: #c4c4c4;
  border: none;
  display: block;
  height: 2px;
  overflow: visible;
  position: relative;
  max-width: 96%;


.style-menus-bar 
  background-color: #ff5c33;
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  width: 5%;
  z-index: 1;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="padding-left: 15px; width: 100%">
  <a class="style-filter-item-options" style="color: #000 !important;" id="filter-option-id-latest">Latest</a>
  <a class="style-filter-item-options" id="filter-option-id-most-views">Most Views</a>
  <a class="style-filter-item-options" id="filter-option-id-random">Random</a>
  <div id="video-index-hr-id" class="style-menus-hr" style="margin-bottom: 1.25rem; width: 100%; margin-left: 0; margin-right: 0; padding-right: 0;">
    <div class="style-menus-bar">
    </div>
  </div>
</div>

这具有相同的效果或进度条。还可以根据文档和位置计算百分比。