jQuery的图像手风琴活动CSS

问题描述

我还没有看到很多手风琴与其旁边的图像相关联，而与人体中的图像相对，因此决定稍微摆弄一下。尽管类本身发生了变化，但我似乎无法将CSS应用于活动类。 h3是否需要一个按钮才能正常工作？ 我只希望活动类具有-而不是+并具有较深的颜色。 任何提示将不胜感激。我认为JQuery是正确的，可能只是我的CSS或其他东西。这是到目前为止的代码-

  // Hide all panels
  let panels = $("#services__accordion > .accordion > .accordion__body").hide()

  // Hide all accordion images
      images = $("#accordion__img > img").hide();

  // Show first panel at start
  panels.first().show();

  // Show first accordion image at start
  images.first().show();

  // On click of a panel title

  $("#services__accordion .accordion  h3").click(function() {
    // The panel is not the H3,but its parent.
    let panel = $(this).parent(),tabName = panel.attr("tab-name"),image = $("#" + tabName + "-img");
    //Slide Up all other panels
    panels.slideUp();
    images.slideUp();

    // Slide Down target panel,and target image.
    panel.find(".accordion__body").slideDown();
    image.slideDown();    

    return false;
  });
});
    
//Add active class
    $(".accordion  h3").on('click',function(){
        $(".accordion  h3").removeClass('active');
        $(this).addClass('active');
    });

和此处的jsfiddle-https://jsfiddle.net/MarioL/32nv0szw/ 谢谢！

解决方法

...。我似乎无法将CSS应用于活动类

发生这种情况是因为您的此css部分是通用的：

.active:after {
    content: "\2212";
 }

将其更改为特定的

#services__accordion h3.active:after {
    content: "\2212";
}

此外，您可以合并click事件，并使用它在启动时显示感兴趣的面板。

代码是：

let panels = $("#services__accordion > .accordion > .accordion__body").hide()

// Hide all accordion images
images = $("#accordion__img > img").hide();



// On click of a panel title

$("#services__accordion .accordion  h3").click(function () {
    // The panel is not the H3,but its parent.
    let panel = $(this).parent(),tabName = panel.attr("tab-name"),image = $("#" + tabName + "-img");

    // Slide Up all other panels
    panels.slideUp();
    images.slideUp();

    // Slide Down target panel,and target image.
    panel.find(".accordion__body").slideDown();
    image.slideDown();

    $(".accordion  h3.active").removeClass('active');
    $(this).addClass('active');

    return false;
}).eq(0).trigger('click');

*{
    font-family:arial;
}

#services__accordion h3 {
    background-color: #F4F4F7;
    color: #033;
    padding: 10px;
}

#services__accordion h3:after {
    content: '\002B';
    color: #ccc9d4;
    font-weight: bold;
    float: right;
    margin-right: 10px;
}
#services__accordion{
    margin:auto;
    width:80%;
}
#accordion-container {
    display: grid;
    grid-template-columns: 40% auto;
}
#accordion__img img {
    display: block;
    width:95%;
    margin:auto;
}
#services__accordion h3:hover {
    background-color: #2aa0c8;
    color: #F4F4F7;
}

.active {
    background-color: #2aa0c8;
    color: #F4F4F7;
}

#services__accordion h3.active:after {
    content: "\2212";
}
.accordion__body{
    padding:0px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div id="accordion-container">
    <div id="accordion__img">
        <img id="photography-img" src="https://www.w3schools.com/w3css/img_lights.jpg" alt="Photography">
        <img id="creativity-img" src="https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png"
             alt="Creativity">
        <img id="web-design-img" src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Web Design">
    </div>

    <div id="services__accordion">
        <div class="accordion" tab-name="photography">
            <h3>ABC</h3>

            <div class="accordion__body">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <!-- /.accordion__body -->
        </div>
        <div class="accordion" tab-name="creativity">
            <h3>DEF</h3>

            <div class="accordion__body">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <!-- /.accordion__body -->
        </div>
        <div class="accordion" tab-name="web-design">
            <h3>GHI</h3>

            <div class="accordion__body">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <!-- /.accordion__body -->
        </div>
    </div>
    <!-- /#services__acordion -->
</div>