javascript - 如何为 slideToggle 指示器使用箭头？-6ren

javascript - 如何为 slideToggle 指示器使用箭头？

转载作者：行者123 更新时间：2023-11-28 09:01:47

CSS

#main_box{
width:300px;
height:20px;
border:1px solid #000000;
background-color:#FFCC00;
}
#slidingbox{
width:300px;
height:400px;
border:1px solid #000000;
background-color:#8AC007;
}

脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#main_box").click(function(){
    $("#slidingbox").slideToggle();
  });
});
</script>

HTML

</head>
<body>
<div id="main_box">Click to slide up and down</div>
<div id="slidingbox"></div>
</body>
</html>

我想在第一个 div 的末尾添加一个箭头作为指示器，它会随着第二个 div 的上下滑动而变化。

有人知道怎么做吗？

最佳答案

为向上和向下箭头添加两个类，并在标题点击功能中切换类。

 <div class="option-heading">
    <div class="arrow-up">&#9650;</div>
    <div class="arrow-down">&#9660;</div>
    heading 1
  </div>
  <div class="option-content">
      <p>content 1</p>
      <p>content 1</p>
      <p>content 1</p>
      <p>content 1</p>


  </div>

//CSS

    $(document).ready(function() {
$(".option-content").hide();
$(".arrow-up").hide();
$(".option-heading").click(function(){
        $(this).next(".option-content").slideToggle(500);
        $(this).find(".arrow-up, .arrow-down").toggle();
});

});

//脚本

    $(document).ready(function() {
$(".option-content").hide();
$(".arrow-up").hide();
$(".option-heading").click(function(){
        $(this).next(".option-content").slideToggle(500);
        $(this).find(".arrow-up, .arrow-down").toggle();
});

});

Demo Jsfiddle

关于javascript - 如何为 slideToggle 指示器使用箭头？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26881139/