如何在列表元素附近放置切换按钮？

时间：2017-06-02 08:51:12

标签： php jquery html css toggle

如何在父元素附近放置切换（显示/隐藏）按钮？ 当我按下按钮显示子元素时，此按钮跳转到列表的底部，但我需要它保持原位 - 靠近父元素。

当前形势的一个例子就是问题。

$(".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>

2 个答案:

答案 0 :(得分：1)

在子元素之前添加按钮。在jquery中切换按钮旁边的元素

$(".has_children").find('ul.children').each(function(){

  var html = $("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
  html.insertBefore($(this));
})


$("button").click(function() {
  $(this).next().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>
     <!--<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
      <ul class="children" style="display: none;">
        <li class="cat-item cat-item-36"><a href="#">Sub-category1</a>
        </li>
      </ul>
 
    </li>
    <li class="cat-item cat-item-32 has_children"><a href="#">Parent product category2</a>
      <!--   <button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
      <ul class="children" style="display: none;">
        <li class="cat-item cat-item-36"><a href="#">Sub-category2</a>
        </li>
      </ul>
 
    </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 has_children"><a href="#">Parent product category3</a>
    <!-- <button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
      <ul class="children" style="display: none;">
        <li class="cat-item cat-item-36"><a href="#">Sub-category3</a>
        </li>
      </ul>
     
    </li>
    <li class="cat-item cat-item-29"><a href="#">Simple category</a>
    </li>
  </ul>
</div>

答案 1 :(得分：1)

这有效：

$(".has_children>a").after("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
$("button").click(function() {
  $(this).next().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;
}
<!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>

相关问题
最新问题