【发布时间】：2017-06-02 08:51:11
【问题描述】：
如何在父元素附近放置切换（显示/隐藏）按钮？ 当我按下按钮显示子元素时，此按钮会跳到列表的底部，但我需要它留在原地 - 靠近父元素。
问题是当前情况的一个例子。
$(".has_children").append("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
$("button").click(function() {
$(this).prev().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children"><a href="#">Parent product category1</a>
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36"><a href="#">Sub-category1</a>
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-32"><a href="#">Parent product category2</a>
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36"><a href="#">Sub-category2</a>
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-28"><a href="#">Simple category1</a>
</li>
<li class="cat-item cat-item-30"><a href="#">Simple category2</a>
</li>
<li class="cat-item cat-item-31"><a href="#">Simple category3</a>
</li>
<li class="cat-item cat-item-27"><a href="#">Parent product category3</a>
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36"><a href="#">Sub-category3</a>
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-29"><a href="#">Simple category</a>
</li>
</ul>
</div>【问题讨论】：
标签： php jquery html css toggle