javascript - 单击父菜单时如何将 + 更改为 -

Question

这个问题已经有答案了:

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using JavaScript (28 个回答)

已关闭 3 年前。

单击菜单父菜单项时如何将 + 更改为 -。我正在寻找使用 jquery 定位::after 元素，但我找不到使用 jquery 定位伪元素的方法

我想将下面的 CSS 更改为单击相应菜单时

.ir-nav-w > ul li::after {
    /* padding-left: 10px; */
    text-transform: uppercase;
    content: "-";
    position: absolute;
    left: 15px;
    top: 4px;
    line-height: 30px;
    font-size: 20px;
    z-index: 0;
}

Fiddle code

$(".nav-w > ul > li > a").click(function() {
  $(this).next().slideToggle();
});


//open active list
$('.nav-w ul li').children().has('.active-menu').css('display', 'block');


// compare url with nav url to show active url 
$(function() {
  //var url = window.location.href;
  var url = window.location.pathname;
  var pgurl = window.location.href.substr(
    window.location.href.lastIndexOf("/") + 1
  );
  $(".nav-w ul li a").each(function() {
    if ($(this).attr("href") == url || $(this).attr("href") == "") {
      $(this).addClass("active-menu");
    }
  });

  console.log("url : " + window.location.pathname);
});

.nav-w a {
  color: black;
  padding: 10px 15px;
  padding-left: 35px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #f1f1f1;
  font-size: 12px;
  font-weight: 600;
  /* color: #178B43 !important; */
  color: #757575;
}


/* ul inside content area*/

.nav-w ul {
  margin-left: 0px;
  list-style-type: none;
  margin-bottom: 0px;
}

.nav-w ul li {
  /*padding-left: 10px;*/
  text-transform: uppercase;
  position: relative;
  width: 100%;
}


/* ol inside content area*/

.nav-w>ul {
  padding-left: 0px;
  padding-right: 0px;
}

.nav-w ul>li ul {
  padding-left: 0px;
  padding-right: 0px;
  display: none;
}

.active-menu {
  color: red !important;
}

.nav-w>ul li::after {
  text-transform: uppercase;
  content: "+";
  position: absolute;
  left: 15px;
  top: 4px;
  line-height: 30px;
  font-size: 20px;
  z-index: 0;
}

.nav-w>ul li ul li::after {
  text-transform: uppercase;
  content: "";
  position: absolute;
  left: 0px;
  top: 5px;
  line-height: 32px;
  font-size: 20px;
  z-index: 0;
}

.nav-w ul li ul li a {
  padding-left: 45px;
}

.nav-w a:hover {
  background: #f5f5f5;
  border-left: 2px solid #178B43;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-w">

  <ul class="">
    <li><a href="#" style="cursor: default;">Share Information</a>
      <ul class="" style="display: none;">
        <li><a href="/investor-relations/share-nformations/share-overview/">Share Overview</a></li>
        <li><a href="/investor-relations/share-nformations/share-graph/">Share Graph </a></li>
        <li><a href="/investor-relations/share-nformations/investor-calculator/">Investement Calculator</a></li>
        <li><a href="/investor-relations/share-nformations/share-prices/">Historical Share Prices</a></li>
      </ul>
    </li>
    <li><a href="#" style="cursor: default;">Financial Information</a>
      <ul class="" style="display: none;">
        <li><a href="/investor-relations/financial-information/earning-releases/">Earning Releases</a></li>
        <li><a href="/investor-relations/financial-information/financial-statements/">Financial Statements</a></li>
        <li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
        <li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
        <li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
      </ul>
    </li>

  </ul>
</div>

Answer 1

我的做法是在单击后向父菜单添加一个类，例如open。

然后在你的CSS中你可以添加一个特殊的修饰符:

.nav-w > ul li.open::after {
    content: "-"
}

再次单击时，删除open类。