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">▲</div>
<div class="arrow-down">▼</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();
});
});
关于javascript - 如何为 slideToggle 指示器使用箭头？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26881139/