Question

我希望只使用css javascript / jquery解决这个问题我希望这些手风琴在展开时获得fa-minus，在折叠时获得fa-plus

我希望课程在展开时更改为fa-minus，在折叠时更改为fa-plus

CSS

<style>
p.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

i.accordion , p.accordion {
    background-color: #ddd; 
}
ul {
    padding: 0 18px;
    display: none;
    background-color: white;
}
</style>
</head>

HTML

<h2>Accordion</h2>

          <p class="accordion">Service <i style="padding-right:100px;" class="accordion fa fa-plus" aria-hidden="true"></i></p>
          <ul class="panel footer-links">
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Order Status</a></li>
            <li><a href="#">faq</a></li>
            <li><a href="#">shipping policy</a></li>
            <li><a href="#">return policy</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Live Chat</a></li>
          </ul>

   <p class="accordion">shop <i class="accordion fa fa-plus" aria-hidden="true"></i></p>
          <ul class="panel footer-links">
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Order Status</a></li>
            <li><a href="#">faq</a></li>
            <li><a href="#">shipping policy</a></li>
            <li><a href="#">return policy</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Live Chat</a></li>
          </ul>

JS

<script>
var acc = document.getElementsByClassName("accordion");
var i;
var plus = document.getElementsByClassName("fa-plus");

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){

        this.classList.toggle("active");
        console.log(this);
        $(this>i).hide();
        $('<i>').addClass('fa-minus');

        var ul = this.nextElementSibling;

        if (ul.style.display === "block") {
            ul.style.display = "none";
            //    $("").show();
        } else {
            ul.style.display = "block";



        }
    }
}
</script>

Answer 1

将$('<i>').addClass('fa-minus');更改为$(this).find('i').toggleClass('fa-minus');

var acc = document.getElementsByClassName("accordion");
var i;
var plus = document.getElementsByClassName("fa-plus");

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){

        this.classList.toggle("active");
        console.log(this);
        $(this>i).hide();
        $(this).find('i').toggleClass('fa-minus');

        var ul = this.nextElementSibling;

        if (ul.style.display === "block") {
            ul.style.display = "none";
            //    $("").show();
        } else {
            ul.style.display = "block";



        }
    }
}

p.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

i.accordion , p.accordion {
    background-color: #ddd; 
}
ul {
    padding: 0 18px;
    display: none;
    background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h2>Accordion</h2>

          <p class="accordion">Service <i style="padding-right:100px;" class="accordion fa fa-plus" aria-hidden="true"></i></p>
          <ul class="panel footer-links">
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Order Status</a></li>
            <li><a href="#">faq</a></li>
            <li><a href="#">shipping policy</a></li>
            <li><a href="#">return policy</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Live Chat</a></li>
          </ul>

   <p class="accordion">shop <i class="accordion fa fa-plus" aria-hidden="true"></i></p>
          <ul class="panel footer-links">
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Order Status</a></li>
            <li><a href="#">faq</a></li>
            <li><a href="#">shipping policy</a></li>
            <li><a href="#">return policy</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Live Chat</a></li>
          </ul>

使用css javascript和jquery加上减去崩溃

1 个答案: