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

标签 javascript jquery html css

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

我的 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>

关于javascript - 单击时如何切换跨度的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27070328/

相关文章:

javascript - Javascript/NodeJS 中的 Protocol Buffer 字段选项

javascript - `[$injector:nomod] Module ' 谷歌地图 ' is not available`

php - 如何在 PHP 中选择 "remember"表单值?

c# - javascript中的复合键表示

javascript - 在 Angular JS 中将 Javascript 对象转换为字符串

javascript - 单击其他按钮时如何删除 jQuery .css()?

c# - C# WebMethod 的 Json 输出不影响 JQuery 的数据表

javascript - Firefox:按下鼠标按钮时鼠标悬停不起作用

jquery - 使用 AJAX 刷新 Django 动态 HTML 表格

javascript - 滚动完成后,如何防止滚动触发的固定导航栏突然跳动?