Question

我正在用jQuery创建一个下拉手风琴菜单。之前我曾经使用过几个版本，在添加图像切换之前，我的脚本可以正常工作。

但是在我添加了图像切换脚本之后，整个切换功能都运行不正常。

＆＃13;

$(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');
    }
  )
})

＆＃13;

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

＆＃13;

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

＆＃13;

所以我想做的是：最初内容将被隐藏，标题为＆＃34; Show＆＃34;显示带箭头的图标。如果我点击标题，将显示隐藏的内容，标题将更改为＆＃34;隐藏＆＃34;并带有向上箭头图标。

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

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

任何人都可以在这里与我分享您的解决方案/意见吗？非常感谢您抽出时间阅读我的问题！

Answer 1

$(this).closet("div")

应该是：

$(this).closest("div")

Answer 2

执行此操作时：

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

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

jQuery切换文本和图像无法正常工作

2 个答案: