Question

我在点击鼠标时有这个折叠行的例子：

jsfiddle.net/7bz5au97/

我想问你如何在问题开头添加像这样的箭头，并在问题扩展后旋转它？

enter image description here

这可以仅使用CSS完成，还是我还需要添加JavaScript？

Answer 1

你几乎可以用css完成这个：

＆＃13;

var arr = document.querySelector('.arrow');
arr.addEventListener('click', function(event) {
  event.target.classList.toggle('down');
});

＆＃13;

.arrow {
  margin: 1em;
}

.arrow::before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: .5em solid transparent;
  border-left-color: gray;
  transform-origin: 0 50%;
  transition: transform .25s;
}

.arrow.down::before {
  transform: rotate(90deg);
  transition: transform .25s;
}

＆＃13;

<div class="arrow"></div>

＆＃13;

Answer 2

以下是您的jsfiddle https://jsfiddle.net/7bz5au97/1/

的更新

我刚刚添加了

$('body').click(function() {
$( 'img' ).toggleClass('rotate');
});

并旋转到img

Answer 3

你可以使用CSS做一个简单的三角形，但是如果你想要像你的图像那样圆角，它会变得复杂。

更加精美的CSS形状here。

$(function () {
    $('span').click (function () {
        $(this).toggleClass ('expanded');
        $('p').toggleClass ('expanded');
    });
});

p:not(.expanded) {
    display:none;
}

span {
    display:block;
    width:0;
    height:0;
    cursor:pointer;
    
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:20px solid black;
}

span.expanded {
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:20px solid black;
}

<script src = "http://code.jquery.com/jquery-2.1.4.min.js"></script>
<span></span>
<p>Hello</p>

Answer 4

为了将来参考，以下是一个不需要javascript的版本：latest question

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="single-row">
    <input name="collapsable" type="radio" id="col-1" class="opener" />
    <label for="col-1">
        <span class="intro">Intro1<i class="fa fa-sort-desc"></i></span>
        <div class="content">
            <p>
                Some text down here
            </p>
        </div>
    </label>    
</div>

<div class="single-row">
    <input name="collapsable" type="radio" id="col-2" class="opener" />
    <label for="col-2">
        <span class="intro">Intro2<i class="fa fa-sort-desc"></i></span>
        <div class="content">
            <p>
                Some text down here
            </p>
        </div>
    </label>
</div>

<div class="single-row">
    <input name="collapsable" type="radio" id="col-3" class="opener" />
    <label for="col-3">
        <span class="intro">Intro3<i class="fa fa-sort-desc"></i></span>
        <div class="content">
            <p>
                Some text down here
            </p>
        </div>
    </label>
</div>

＆＃13;

$row['date_add']

＆＃13;

Answer 5

没有图像的简单CSS解决方案

要求： ＆＃34;我想问你如何在问题开头添加像这样的箭头，并在问题扩展后旋转它？＆＃34;

对于像这样的简单弹出信息，可以用CSS完成所有操作......没有任何脚本。而unicode箭头▶可以代替加载图像和进行图像变换。我只是把它作为一种替代方案。

运行要测试的代码段

＆＃13;

<!doctype html>
<html>
<body>
<style type="text/css">
ul {
	list-style: none;
	font-size: 16px;
	font-family: sans-serif;
}
li::before {
	content: "▶ ";
	font-size: 1.2em;
}
li:hover::before {
	content: "▼ ";
	color: red;
}
li > div {
	margin: 0.5em;
	display: none;
}
li:hover > div {
	display: block;
	height: 5em;
	width: 20em;
	border: 1px gray dotted;
	padding: 1em;
	background-color: ghostwhite;
}
</style>
<b>Example</b>
<ul>
<li>Q1: Can I try the software before I buy it?
<div>
	Yes! Simply download a free trial and you'll have 
	instant access to all features for 30 days, absolutely 
	free. We don't require your credit card details or any 
	commitment.
</div>
<li>Q2: Can I try the software before I buy it?
<div>
	Yes! Simply download a free trial and you'll have 
	instant access to all features for 30 days, absolutely 
	free. We don't require your credit card details or any 
	commitment.
</div>
<li>Q3: Can I try the software before I buy it?
<div>
	Yes! Simply download a free trial and you'll have 
	instant access to all features for 30 days, absolutely 
	free. We don't require your credit card details or any 
	commitment.
</div>
</ul>
</body>
</html>

＆＃13;

单击鼠标时折叠箭头

5 个答案:

没有图像的简单CSS解决方案