Question

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: