Блог

Главная - Вопросы по программированию - jQuery image accordion активный css

jQuery image accordion активный css

#jquery #css #accordion

#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/
Спасибо!

Ответ №1:

…. Кажется, я не могу заставить css применяться к активному классу

Это происходит потому, что ваша часть this 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: '02B';
    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>