jQuery 切换文本和图像不起作用

Question

我正在使用 jQuery 创建一个下拉 Accordion 菜单。 我之前处理过几个版本，在添加图像切换之前我的脚本可以正常运行。

但是在我添加了图像切换脚本之后，整个切换功能都无法正常工作。

$(function() {
  $('.showmore').click(
    function() {
      $(this).closest("div").next(".dropdown").toggle();
      $(this).find('i').toggleClass('arrow-down arrow-up');
      if ($(this).text() == "Show") {
        $(this).text("Hide");
      } else {
        $(this).text("Show");
      }
      $(this).closest("div").next(".dropdown").toggleClass('selected');
    }
  )
})

.title {
  background-color: #CCCCCC;
}

.sprite {
  background-image: url(https://image.ibb.co/bHTF8R/pinkarrow.png);
  background-repeat: no-repeat;
  display: block;
}

.arrow-down {
  width: 9px;
  height: 6px;
  background-position: -9px 0;
}

.arrow-up {
  width: 9px;
  height: 6px;
  background-position: 0 0;
}

.arrow-down,
.arrow-up {
  display: inline-block;
  padding-left: 5px;
}

.dropdown {
  display: none;
}

.selected {
  border: 4px solid #CCCCCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="content">
  <div class="title">
    <span class="showmore">Show<i class="sprite arrow-down"></i></span>
  </div>
  <!--End of class Title-->

  <div class="dropdown">
    XXXXXXXXXX Content XXXXXXXXXX
  </div>
</div>

所以我想做的是:最初内容将被隐藏，标题为“显示”并显示向下箭头图标。如果我单击标题，将显示隐藏的内容并且标题将更改为“隐藏”并带有向上箭头图标。

最初我可以用这些文本实现切换，但是，在我尝试添加图像切换脚本后，它不起作用。

$(this).find('i').toggleClass('arrow-down arrow-up');

有人可以在这里与我分享您的解决方案/意见吗？非常感谢您花时间阅读我的问题!

Answer 1

当你这样做时:

$(this).text("any text");

您删除 <i>您用作箭头的元素。生成的标记变为:

<span class="showmore">any text</span>

自 <i>现在消失了，没有什么可以切换的。与其在整个元素中设置文本，不如创建一个子元素来保存文本:

<span class="showmore">
    <span>Show</span>
    <i class="sprite arrow-down"></i>
</span>

然后您可以针对该特定元素来设置文本:

$(this).find("span").text("any text");

---

演示:

$(function() {
  $('.showmore').click(
    function() {
      $(this).closest("div").next(".dropdown").toggle();
      $(this).find('i').toggleClass('arrow-down arrow-up');
      if ($(this).find("span").text() == "Show") {
        $(this).find("span").text("Hide");
      } else {
        $(this).find("span").text("Show");
      }
      $(this).closest("div").next(".dropdown").toggleClass('selected');
    }
  )
})

.title {
  background-color: #CCCCCC;
}

.sprite {
  background-image: url(https://image.ibb.co/bHTF8R/pinkarrow.png);
  background-repeat: no-repeat;
  display: block;
}

.arrow-down {
  width: 9px;
  height: 6px;
  background-position: -9px 0;
}

.arrow-up {
  width: 9px;
  height: 6px;
  background-position: 0 0;
}

.arrow-down,
.arrow-up {
  display: inline-block;
  padding-left: 5px;
}

.dropdown {
  display: none;
}

.selected {
  border: 4px solid #CCCCCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="content">
  <div class="title">
    <span class="showmore">
      <span>Show</span>
      <i class="sprite arrow-down"></i>
    </span>
  </div>
  <!--End of class Title-->

  <div class="dropdown">
    XXXXXXXXXX Content XXXXXXXXXX
  </div>
</div>

(注意:在我的浏览器中，“向上箭头”的样式看起来不太正确。可能需要一些调整。)