JQuery 图像 Accordion 事件 css

Question

我没有看到很多 Accordion 与旁边的图像相关联，而不是 body 中的图像，所以决定稍微玩一下。尽管类本身发生了变化，但我似乎无法将 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/
谢谢!

Answer 1

.... I can't seem to get the css to be applied to the active class

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

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

将其更改为特定的:

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

此外，您可以合并单击事件并使用它在启动时显示感兴趣的面板。
代码是:

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>