单击时如何切换跨度的内容

How to toggle the contents of span when clicked?

本文关键字：何切换单击更新时间：2023-09-26

我有一个带有下拉菜单的导航栏。我在跨度内的下拉菜单前面有一个 +。我希望加号切换到 - 当菜单下拉时，当菜单打开（隐藏）时切换回 +。我该怎么做？

我的 HTML 看起来像

<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li class="shop"><a href="#"><span>+</span>Shop</a>
            <ul class="shopList">
                <li><a href="#">New Arrivals</a></li>
                <li><a href="#">Dresses</a></li>
                <li><a href="#">Jumpsuits</a></li>
            </ul>
        </li>
        <li><a href="wholesale.php">Wholesale</a></li>
        <li><a href="retailers.php">Retailers</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

我目前正在使用 js 来下拉菜单。我可以添加到我当前的 js 中以实现此目的吗？我的js看起来像

$(document).ready(function() {
    $('.shop').click(function() {
            $('.shopList').slideToggle("fast");
    });
});

这是我的 CSS

nav{
   position:relative;
   display:block;
   width:70%;
   margin:0;
   padding:3px 15%;
   border-top:1px solid #d0d0d0;
   text-align:center;
   font:15px 'OpenSans';
   z-index: 999;
}
nav ul{
   position:relative;
   width:100%;
   margin:0;
   padding:0;
}
nav li{
   display:inline-block;
   margin:0 10px;
   padding:0;
}
nav li ul li{
   position:relative;
   display:block;
   width:150px;
   margin:0;
   padding:0;
}
.shopList{
   position:absolute;
   display:none;
   width:100px;
   margin:0 0 0 -50px;
   padding:0;
}
nav a{
   position:relative;
   display:block;
   width:auto;
   margin:0;
   padding:0;
   color:#707070;
   text-decoration:none;
}

一种解决方案是将以前的文本与新的文本进行比较：

    $('.shop').click(function() {
      $('.shopList').slideToggle("fast");
      $("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
    });

nav {
  position: relative;
  display: block;
  width: 70%;
  margin: 0;
  padding: 3px 15%;
  border-top: 1px solid #d0d0d0;
  text-align: center;
  font: 15px'OpenSans';
  z-index: 999;
}
nav ul {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
  margin: 0 10px;
  padding: 0;
}
nav li ul {
  display: none;
}
nav li ul li {
  position: relative;
  display: block;
  width: 150px;
  margin: 0;
  padding: 0;
}
.shopList {
  position: absolute;
  display: none;
  width: 100px;
  margin: 0 0 0 -50px;
  padding: 0;
}
nav a {
  position: relative;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  color: #707070;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="index.php">Home</a>
    </li>
    <li><a href="about.php">About</a>
    </li>
    <li class="shop"><a href="#"><span>+</span>Shop</a>
      <ul class="shopList">
        <li><a href="#">New Arrivals</a>
        </li>
        <li><a href="#">Dresses</a>
        </li>
        <li><a href="#">Jumpsuits</a>
        </li>
      </ul>
    </li>
    <li><a href="wholesale.php">Wholesale</a>
    </li>
    <li><a href="retailers.php">Retailers</a>
    </li>
    <li><a href="contact.php">Contact</a>
    </li>
  </ul>
</nav>