Question

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

<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上下滑动时它会发生变化。

有人知道怎么做吗？

Answer 1

为向上和向下箭头添加两个类，并在标题单击函数内切换类。

 <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

Answer 2

你可以在＆＃34;之后添加伪元素＆＃34;第一个div中的箭头然后为up和down创建两个类。每个箭头包含不同的＆＃34;内容：url＆＃34; css然后将类添加到div。

// HTML

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

//脚本

$(document).ready(function() {
$("#main_box").on("click",function(){
    $("#slidingbox").slideToggle('fast',function(){
        if ($('#slidingbox').is(':hidden')) {
            $("#main_box").removeClass('active')
            $("#main_box").addClass('in-active')
        }
        else{
            $("#main_box").removeClass('in-active')
            $("#main_box").addClass('active')
        }
    });
});

        });

如何使用slideToggle指示箭头？

CSS

SCRIPT

HTML

2 个答案: